1：不管是兄弟组件之间的传值，还是页面之间的传值（如：页面A打开页面B 页面B返回到页面A,给页面A传值)
步骤一：eventVue.js
import Vue from ‘vue‘ export default new Vue()
步骤二： 页面B.vue
import bus from "@/utils/eventVue.js";
methods: {
clickFn() {
//返回到上一个页面A,传递变量par
bus.$emit("updateData", par);
// 返回到上一个页面
wx.navigateBack({
delta: 1
});
}
}
页面A.vue
import bus from "@/utils/eventVue.js"; onShow() { let that = this; bus.$on("updateData", function(par) { console.log( that.seledVal, par); }); }
2: 函数防抖与函数节流
utils.js:
// 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次， 如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 function debounce(fn, t) { let delay = t || 500 let timer // console.log(fn) return function () { // console.log(‘arguments‘, arguments) let args = arguments if (timer) { clearTimeout(timer) } timer = setTimeout(() => { timer = null // console.log(this) fn.apply(this, args) }, delay) } } // 函数节流(throttle)：函数在一段时间内（gapTime）多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。 // 防止用户多次点击 function throttle(fn, gapTime) { // console.log(fn) // gapTime：时间间隔 if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函数 return function () { let _nowTime = +new Date() // console.log(‘111_nowTime‘, _nowTime, ‘_lastTime‘, _lastTime) if (_nowTime - _lastTime > gapTime || !_lastTime) { // console.log(‘22_nowTime‘, _nowTime, ‘_lastTime‘, _lastTime) fn.apply(this, arguments) //将this和参数传给原函数 _lastTime = _nowTime } } } export default { throttle, debounce, }
函数防抖用在 输入框input输入时 实时调取后台接口实现查询功能，当用户输入值后停留超过一段时间 再调取接口查询数据，避免一直调用接口。
<input
type="text"
:value="value"
@input="bindphInput"
>
import util from "@/utils/util.js";
// input输入框的值发生变化
bindphInput(e) {
this.value = e.mp.detail.value;
// input搜索框实时调用接口会请求过多，所以用函数防抖
this.emitParentFn();
},
//用户暂停输入超过0.6s 才会请求接口
emitParentFn: util.debounce(function(e) {
this.$emit("sub", this.value);
}, 600)
函数节流:防止用户多次连续点击同一个按钮
<p class="btns" @click="openpage">点击</p> import util from "@/utils/util.js"; // 第n+1次点击按钮的时间与第n次相差超过1.5s以后，才会执行函数fn 打开新页面 openpage: util.throttle(function(e) { wx.navigateTo({ url: "/pages/packageA/pages/selfName/main" });
}
地址选择器： picker-view