在Vue中为组件自定义事件

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

自定义事件

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

1
this.$emit('onAdd', item)

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

接收事件

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

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

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

1
2
3
4
5
6
7
8
9
export default {
///
methods: {
onAddItem: function() {
// ...
}
}
...
}

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

本文标题:在Vue中为组件自定义事件

文章作者:Morning Star

发布时间:2019年09月21日 - 12:09

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/web/vue/vue-component-user-defined-event/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。