基础支持
- 父组件获得子组件实例对象
this.selectComponent(selector)
this.selectAllComponents(selector)
- 子组件触发父组件
this.triggerEvent()
封装实现
新建bus.js文件
module.exports = Behavior({
methods: {
_onBusRelations(e) {
e.detail = e.detail || {
}
let options = {
selector: '', //直接拼装好的选择器 如:'#id1,.class1,id2,class2'
id: '', //id选择器
class: '', //类选择器
name: '', //需要调用的 组件的内部方法名称
params: {
}, //传递的参数
...e.detail
}
if (options.selector) {
} else if (options.id) {
options.selector = `#${
options.id}`
} else if (options.class) {
options.selector = `.${
options.class}`
} else {
console.error('未获取到子节点')
}
try {
this.selectAllComponents(options.selector).forEach((item) => {
new Promise(resolve => {
//使用异步的方式,如果有多个子组件,不用等待调用方法的运行完成
item[options.name](options.params)
})
})
} catch (e) {
console.log(e);
}
}
}
})
使用方法
触发自定义组件custom-button内的clearInput方法,所有的custom-input都相应此事件
新建n个自定义组件,在页面json中引用组件,在页面wxml中使用组件, 在页面js文件中引用bus.js
//custom-buttom 内触发clearInput方法,会响应到页面的 bind:bus="_onBusRelations"
clearInput() {
this.triggerEvent('bus', {
name: 'clearInput',
class: 'custom-input'
// id: 'customInput'
}, {
bubbles: true,
composed: false
})
}
// custom-input 内相应对应的方法
clearInput() {
console.log('响应清除');
}