在Vue中为组件自定义事件

在在Vue中为组件传递参数中，给大家介绍了如何通过 props 属性向组件(Component)传递参数，在本文中将会给大家介绍如何自定义组件的事件，如何响应事件，又如何通过事件来接收数据。

自定义事件

在 vue 框架中，自定义事件的方法比较简单，只需要在适当的地方（通常组件自身的事件响应函数中)调用 this.$emit 函数即可。如:

this.$emit('onAdd', item)

其中 onAdd 就是自定义的事件名， item 为事件的参数。

接收事件

在使用组件的模板中，通过在组件标签中加入 v-on 属性，即可接收对应的事件：

<hello-world v-on:onAdd = 'onAddItem'></hello-world>

然后在对应的 script 部分定义 onAddItem 函数:

export default {
    ///
    methods: {
        onAddItem: function() {
            // ...
        }
    }
    ...
}

这个方法也可用于从子组件向父组件传递参数。