标签：实现 word span click 通知 按钮 触发事件 amp nbsp
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。
每个Vue实例都实现了【事件接口】，即：
1、使用 $on(eventName) 监听事件
2、使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
html代码：
1 <div id="counter-event-example"> 2 <p>{{ total }}</p> 3 <button-counter v-on:increment="incrementTotal"></button-counter> 4 <button-counter v-on:increment="incrementTotal"></button-counter> 5 </div>
css代码：
1 Vue.component(‘button-counter‘, { 2 template: ‘<button v-on:click="increment">{{ counter }}</button>‘, 3 data: function () { 4 return { 5 counter: 0 6 } 7 }, 8 methods: { 9 increment: function () { 10 this.counter += 1 11 this.$emit(‘increment‘) 12 } 13 }, 14 }) 15 new Vue({ 16 el: ‘#counter-event-example‘, 17 data: { 18 total: 0 19 }, 20 methods: { 21 incrementTotal: function () { 22 this.total += 1 23 } 24 } 25 })
在子组件里面把点击事件（click）绑定给了函数increment。点击子组件的按钮将会触发位于子组件的increment函数。
this.$emit(‘increment‘) 这是触发当前实例上的事件。附加参数都会传给监听器回调。
子组件在调用了increment函数的时候，通过$emit来通知父组件。这样就形成父子组件间的相互呼应传递信息。
在平常的组件通讯，父组件是通过props参数对子组件进行传递，而子组件向父组件传递则可以使用自定义事件了。
这样，父组件和子组件已经解耦，子组件收到的是父组件内部的实现
标签：实现 word span click 通知 按钮 触发事件 amp nbsp
原文地址：https://www.cnblogs.com/return00/p/9795028.html
