Vue 自定义事件

标签：Vue 自定义 绑定 组件 事件 customEvent 回调

组件的自定义事件　

使用场景

　　A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件

在父组件中：

<HelloWorld @customEvent="test1"/>

　　或

<HelloWorld v-on:customEvent="test1"/>

　　（2）第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('customEvent',this.test1)
}

　　（3）若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。

<HelloWorld @customEvent.once="test1"/>

触发自定义事件

 　　其中数据为事件回调函数的参数，按顺序添加参数即可

this.$emit('customEvent',数据)

解绑自定义事件

this.$off('customEvent')

注意

通过 this.$refs.xxx.$on('customEvent', 回调) 绑定自定义事件时，回调函数的this指向问题，最好使用箭头函数或配置在methods中

标签：Vue,自定义,绑定,组件,事件,customEvent,回调
From： https://www.cnblogs.com/xt112233/p/17000229.html