第一步：我们在父组件中注册子组件，然后再给子组件标签添加一个自定义事件监听，这样在子组件实例上就绑定了一个自定义的事件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接收到
以上仅供参考学习，如果错误，请大佬指出，万分感谢。一起学习一起进步。
