如何從其他組件的事件偵聽器（$ on）調用此組件方法？

Question

我在這裏閱讀過有關非父母 - 孩子通信https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication。傾聽公車事件的想法很清楚。

但是現在還不清楚如何從總線監聽器調用其他組件的方法。 例如，我怎麼能叫lst.additem2（）從eventHub $上（？ 'LST：的AddItem'，（）的函數 看來，這在出現eventHub上下文（在控制檯基礎。日誌（這一點。$數據）結果）。

還有就是我的例子

Vue.component('lst', { 
template: ` 
    <ul> 
    <li v-for="(item, index) in items" :good='item' :key="item.id"> 
     <item :it='item' :index="index" ></item> 
    </li> 
    </ul>`, 
created: function() { 
    this.eventHub.$on('lst:additem', function(d) { 
    console.log(d); 
    console.log(this.$data.tip); 
    // this.additem2(d); this won't work :(
    }); 
}, 
methods: { 
    additem2 : function(newitem) { 
    console.log('...here '+newitem.weight); 
    this.items.push(newitem); 
    console.log('item added'); 
    } 
} 

更多的jsfiddle https://jsfiddle.net/0mx8mtcj/13/

Answer 1

在您收聽：

this.eventHub.$on('lst:additem', function(d) { 
    // `this` here refers to the bus instance 
    }); 

所以才保存組件的參考：

var self = this; 
this.eventHub.$on('lst:additem', function(d) { 
    self.additem2(d); 
});