前言
看了几篇帖子，都没有将$emit两种用法汇聚总结在一起。需要额外的浪费时间去查看其他帖子，索性自己总结一下，方便以后查看。
一、通过this.$emit触发父组件方法实现
这种方法调用是我平常最熟悉的，通过触发事件使父组件拿到子组件传递过来的值。
//父组件，将定义的方法传递给子元素
<template>
<div class="father">
<h1>我是父组件</h1>
<Son :msg="msg" @changeMsg="changeMsg"/>
</div>
</template>
<script>
import Son from '@/components/Son.vue'
export default {
name: 'Father',
components: {
Son
},
data(){
return{
msg:1
}
}
methods:{
changeMsg(text,num){
console.log(text,num);
this.msg=this.msg+1
}
},
}
</script>
//子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值
<template>
<div class='son'>
<h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
<h1>父组件数据：{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'Son',
props: {
msg: Number,
},
data(){
return{
text:"我是子组件数据，我要发送给父组件",
num:12
}
},
methods:{
changeFatherData(){
this.$emit('changeMsg',this.text,this.num)
}
},
}
</script>
注意
this.$emit(‘changeMsg’,this.text,this.num)
<Son :msg=“msg” @changeMsg=“changeMsg”/>
$emit中的changeMsg方法名称要和@changeMsg名称一样
二、.sync修饰符与$emit(update:xxx)
.sync 修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
//父组件，将定义的方法传递给子元素
<template>
<div class="father">
<h1>我是父组件</h1>
<Son :msg.sync="message" />
</div>
</template>
<script>
import Son from '@/components/Son.vue'
export default {
name: 'Father',
components: {
Son
},
data(){
return{
message:1
}
}
}
</script>
//子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值
<template>
<div class='son'>
<h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
<h1>父组件数据：{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'Son',
props: {
msg: Number,
},
data(){
return{
num:12
}
},
methods:{
changeFatherData(){
this.$emit('update:msg',this.num)
}
},
}
</script>
子组件触发changeFatherData方法，msg信息就会变为12
本质
<son :a.sync="num"></son>
等价于
<son
:a="num" @update:a="val => num = val">
</son>
// 相当于多了一个事件监听，事件名是 update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。