Vue自定义事件(详解)

前面的话

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件

事件绑定

每个 Vue 实例都实现了事件接口 (Events interface)，即

使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件

[注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

[注意]不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

<div id="example"> <parent></parent></div>

<script>var childNode = { template: `<button @click="incrementCounter">{{ counter }}</button>`, data(){  return {   counter: 0  } }, methods:{  incrementCounter(){   this.counter ++;   this.$emit('increment');  } },}var parentNode = { template: ` <div class="parent">  <p>{{total}}</p>  <child @increment="incrementTotal"></child>  <child @increment="incrementTotal"></child> </div> `, components: {  'child': childNode }, data(){  return {   'total':0  } }, methods:{  incrementTotal(){   this.total ++;  } }};// 创建根实例new Vue({ el: '#example', components: {  'parent': parentNode }})</script>

命名约定

自定义事件的命名约定与组件注册及props的命名约定都不相同，由于自定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使用中划线形式

<child @pass-data="getData"></child>

而子组件中触发事件时，同样使用中划线形式

 this.$emit('pass-data',this.childMsg)

数据传递

子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据

this.$emit('pass-data',this.childMsg)

父组件通过$on监听事件，事件处理函数的参数则为接收的数据

getData(value){   this.msg = value;}

<div id="example"> <parent></parent></div>

<script>var childNode = { template: ` <div class="child">  <div>   <span>子组件数据</span>   <input v-model="childMsg" @input="data">  </div>  <p>{{childMsg}}</p> </div> `, data(){  return{   childMsg:''  } }, methods:{  data(){   this.$emit('pass-data',this.childMsg)  } }}var parentNode = { template: ` <div class="parent">  <div>   <span>父组件数据</span>   <input v-model="msg">  </div>  <p>{{msg}}</p>  <child @pass-data="getData"></child> </div> `, components: {  'child': childNode }, data(){  return {   'msg':'match'  } }, methods:{  getData(value){   this.msg = value;  } }};// 创建根实例new Vue({ el: '#example', components: {  'parent': parentNode }})</script>