阅读(1723)
赞(10)
wepy 组件通信与交互
2017-06-17 15:54:07 更新
wepy.component基类提供三个方法$broadcast,$emit,$invoke,因此任一页面或任一组件都可以调用上述三种方法实现通信与交互,如:
$this.$emit('some-event', 1, 2, 3, 4);
组件的事件监听需要写在events属性下,如:
import wepy form 'wepy';
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
events = {
'some-event': ($event, ...args) {
console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
}
};
// Other properties
}
- $broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果Page_Index发起一个$broadcast事件,那么接收到事件的先后顺序为:A, B, C, D, E, F, G, H。如下图:
- $emit$emit与$broadcast正好相反,事件发起组件的父组件会依次接收到$emit事件,如上图,如果E发起一个$emit事件,那么接收到事件的先后顺序为:A, Page_Index。如下图:
- $invoke$invoke是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。
如果想在Page_Index中调用组件A的某个方法:
this.$invoke('ComA', 'someMethod', 'someArgs');
如果想在组件A中调用组件G的某个方法:
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
← wepy 组件