vue中通过$emit实现子向父通信

本篇讨论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接收到

以上仅供参考学习，如果错误，请大佬指出，万分感谢。一起学习一起进步。