本篇讨论vue中使用$emit实现子向父通信，
第一步：我们在父组件中注册子组件，然后再给子组件标签添加一个自定义事件监听，这样在子组件实例上就绑定了一个自定义的事件add。
后面如果触发add事件，那么就会执行addBtnClick函数。
1 <template> 2 <div> 3 <h1>当前数为：{{ counter }}</h1> 4 <!-- 自定义add --> 5 <Add @add="addBtnClick"></Add> 7 </div> 8 </template> 9 10 <script> 11 import Add from './components/Add.vue';13 export default { 14 name:'App', 15 components: { 16 Add,18 }, 19 data () { 20 return { 21 counter:0 22 } 23 }, 24 methods: { 25 addBtnClick(count){ 26 this.counter += count; 27 },31 32 } 33 } 34 </script> 35 36 <style scoped> 37 38 </style>
第二步：怎么去触发add事件呢，点击事件鼠标点击触发，键盘事件，按键盘触发，而自定义事件这里就用到了Vue提供的$emit去触发。
这里给谁绑定的事件就找谁触发，我们是给Add组件绑定的事件，那么就应该让Add组件去触发自定义事件add，
那怎么去执行$emit呢，这时我们就可以在Add组件中写一个按钮，然后添加点击事件，然后点击事件触发回调函数btnClick然后执行回调函数的代码。
当然我们也可以用watch监听器，去监听某一个数据，当数据发生改变时，触发自定义事件add也是可以的。
这里我就用点击事件简单点，点击按钮触发回调函数。然后再用$emit去触发自定义事件，这里$emit是可以传入多个参数的
1 <template> 2 <div> 3 <button @click="btnClick(1)">+1</button> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Add', 10 methods: { 11 btnClick(i){ 12 // 触发自定义事件 13 this.$emit('add',i);//第一个参数是自定义事件的名称，第二个是传递出去的参数 14 } 15 } 16 } 17 </script> 18 19 <style scoped></style>
第三步：当add自定事件被触发，那么addBtnClick回调函数就会被执行，当执行函数时子组件通过$emit传递过来的，参数就可以被addBtnClick接收到
以上仅供参考学习，如果错误，请大佬指出，万分感谢。一起学习一起进步。