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 。

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

父组件：

<template>
  <div>
     <child @childFunc="fatherFunc"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
 export default{
  components:{
    Child 
 },
  data(){
return{
       }
},
  methods:{
    fatherFunc(data){
           console.log("儿子："，data,"爸爸："，'hello，儿子！')
                   }
         }
}
</script>

子组件：

<template>
 <div>
 <button @click="baba">儿子呼唤道：“爸爸!”</button>
</div>
</template>
<script>
 export default{
  data(){
    return{
      papa"爸爸！"
       }},
  methods:{
    baba(){
        this.$emit("childFunc",this.papa)；
        }
    }
}
</script>

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

父组件：

<template>
  <div>
     <child ref="childName"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
 export default{
  components:{
    Child 
 },
  data(){
return{
       }
},
moumted(){    
  this.$refs.childName.$on("childFunc",this.fatherFunc(data));
//这个绑定事件的方法比上一种更灵活，上一种DOM一挂载就绑定了事件，
//而这一种可以延迟时间绑定，比如添加定时器
     }
  methods:{
    fatherFunc(data)  
           console.log("儿子："，data,"爸爸："，'hello，儿子！')
                   }
         }
}
</script>

子组件：不变

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

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一样，都是不用引入，直接可以使用的

操作过程简述：

 父组件：

<template>
  <div>
     <child @childFunc="fatherFunc"></child>
  </div>
</template>
<script setup lang="ts">
import Child from './Child.vue'
let fatherFunc=(data)=>{
        console.log("爸爸说：",data)
          }
</script>

子组件：

<template>
 <div>
 <button @click="baba">点击</button>
</div>
</template>
<script setup lang="ts">
import ref from "vue"
var data=ref("儿子，早上好！")；
var $emit=defineEmits(["childFunc"])
let baba=()=>{
       $emit("childFunc",data.value)
       }
</script>

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