wepy中組件之間通訊方法

events

events是WePY組件事件處理函數對象，存放響應組件之間經過broadcast、emit、$invoke所傳遞的事件的函數。

 

$broadcast —— 父往子傳

$broadcast事件由父組件發起，全部的子組件都會收到父組件發出的數據，嗯，相似於村口的廣播大喇叭。他的傳播順序爲：

 

在父組件的某個函數內，向子組件下發了index-broadcast這個通知，以下：

// template
<mybtn></mybtn>

// script
onShow(){
  this.$broadcast('index-broadcast', '我正在測試哈哈哈哈');
}

 

 

那麼在子組件中，能夠用這種方法來接受數據：

// template
<button>{{title}}</button>

// script
props = {
    title: String
}
events = {
  'index-broadcast': (...args) => {
    this.title = args[0];   // 我正在測試哈哈哈哈
    //能夠經過如下方法拿到子組件名稱+拿到數據的事件名稱+事件的來源
    let $event = args[args.length - 1]    
    console.log($event)
    console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
  }
}

 

$emit —— 子往父傳

emit 與 broadcast 正好相反，事件發起組件的全部祖先組件會依次接收到emit事件，若是組件 ComE 發起一個 emit 事件，那麼接收到事件的前後順序爲：組件ComA、頁面Page_Index。以下圖：

 

onLoad(){
    this.emptyData = this.$parent.emptyData
    setTimeout(() => {
        this.$emit('index-emit', 'jack')
    }, 3000)
}

咱們能夠看到counter組件的plus方法向父組件$emit了一個一個名叫index-emit的方法，父組件該如何接收他？
直接在父組件的events裏面寫就好啦：

events = {
    'index-emit': (...arg) => {
        this.username = arg[0];   
    }
}

 

 

$invoke —— 父往子傳

$invoke是一個頁面或組件對另外一個組件中的方法的直接調用，經過傳入組件路徑找到相應的組件，而後再調用其方法。

好比，想在頁面Page_Index中調用組件ComA的某個方法：

this.$invoke('ComA', 'someMethod', 'someArgs');

在父組件中，想要調用子組件counter的某個方法，以下：

this.$invoke('emptyStatus', 'showEmpty', 111, 222)
this.$invoke('emptyStatus', 'hideEmpty', 333, 444)

那麼在子組件中能夠經過這樣來接收父組件傳過來的參數：

methods = {
    showEmpty(a, b){
        console.log(a);   // 111
        console.log(b);   // 222
        this.blockStatus = true
    },
    hideEmpty(a, b){
        console.log(a);   // 333
        console.log(b);   // 444
        this.blockStatus = false
    }
}

 

文章來源：https://www.jianshu.com/p/c87ab3c1681d