Vue 应用程序可以在 js 中捕获孩子发出的事件吗？

Question

我是Vuejs的新手。
通常，Vue在向父级发送数据时使用event。
例如

Vue.component('child', {
template: `
<div class="myitem">
<button v-on:click="senddata()">
Send Data
</button>
</div>`,
methods:{
senddata:function(){
this.$emit('data', 'testdata');
}
}
})

然后在父组件或应用中使用"子"。

<child v-on:data="eventHandler" ref="child"></child>

在父方法中，有一个eventHandler来处理从子方法发送的数据。
如果child组件发出事件data，则会调用eventHandler。

methods: {
eventHandler: function (data) {
console.log('received data: ' + data);   
}
}

这很好用。
但是我想在代码中添加eventHandler。

this.$refs.child.data().then(function(data){
//According to the data..., the app want to process data...
});

像上面这样的代码可能吗？

Answer 1

但我想在代码中添加事件处理程序。

然后，您需要使用编程事件侦听器 API;特别是$on：

mounted() {
this.$refs.child.$on('data', this.eventHandler);
},
methods: {
eventHandler(data) {
...
}
},

在此特定示例中，您需要在mounted挂钩中执行此操作，因为子组件尚未在created钩中创建。