Vue组件绑定自定义事件

Posted 2020-09-24 Russ Zhong

Vue组件使用v-on绑定自定义事件：
　　可以分为3步理解：
　　　　1.在组件模板中按照正常事件机制绑定事件：
　　　　　　template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
　　　　　　如上，v-on:click就是用来给子组件绑定点击事件的，这就是原生的自带的事件，容易理解。
　　　　2.子组件的事件发生时，在事件函数中向父组件“报告”这一事件（使用$emit）：
　　　　　　methods: {
　　　　　　　　increment: function () {
　　　　　　　　　　this.counter += 1;
　　　　　　　　　　this.$emit(‘increment‘);
　　　　　　　　}
　　　　　　},
　　　　　　上面事件函数中的代码this.$emit(‘increment‘)的意思就是向父组件报告，自己发生了‘increment’事件。至于发生的事件叫什么名字，可以随意取名，只要在父组件中绑定时名称一致即可。
　　　　3.父组件在使用时，明确使用v-on绑定子组件传来的事件：
　　　　　　<button-counter v-on:increment="incrementTotal"></button-counter>
　　　　　　上方的v-on：increment就是绑定的子组件的increment事件。
　　　　　　常用语父组件中的数据变化与子组件的操作有关的情况。