组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第二弹------$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>点击子组件按钮结果：控制台打印：爸爸说：儿子，早上好！
