Vue2和Vue3组件间通信方式汇总（2）------$emit

组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第二弹------$emit,并讲讲分别在Vue2、Vue3中的表现。

Vue2+Vue3组件间通信方式汇总（1）------props

一、$emit，子组件调用父组件的方法（也叫自定义事件）

------Vue2

       两种接收（绑定事件）方式一种：自定义事件：@child="father"形式 ,当然原生事件的修饰也可以用在自定义事件上：once\prevent\stop\capture\self\passive；另一种：ref, this.$refs.child.$on("child",对应父组件方式this.father)，当然$on也可以换成其他绑定指令如：$once 。

       第一种：用自定义事件的方式接受子组件的调用。

父组件：

子组件：

         第二种，通过ref+$on的方式接收子组件的方法调用：

父组件：

子组件：不变

题外话：自定义事件解绑方式：

this.$off():不传参数，表示解绑所有自定义事件，加参数的话，里面放数组，数组装要解绑的事件名称。

this.$destroy()：相当于vue生命周期里面的beforeDistroy，销毁了data里面的数据，销毁了自定义事件，注意没有销毁原生事件。

-------vue3

注意：1、setup中没有this，也就是说没有vue实例vm,也没有组件实例vc,所以通过this.$refs获取子组件属性和方法行不通，因此在则会方面，vue2和vue3使用有一定区别。

           2、在Vue2中，在子组件标签中放@click，默认是自定义事件，用”.native“修饰”@click.native=“将click事件标记成原生DOM事件。而在Vue3中，@click事件默认是原生DOM事件，如何标记成自定义事件？在defineEmits函数中加上click。总结一句，Vue2默认自定义事件，Vue3默认是原生DOM事件。

          3、Vue3去掉了$on

          4、defineEmits和defineProps一样，都是不用引入，直接可以使用的

操作过程简述：

 父组件：

子组件：

点击子组件按钮结果：控制台打印：爸爸说：儿子，早上好！