vue中子传父之间通信(this.$emit触发父组件方法和.sync修饰符与$emit(update:xxx))
文章目录
- 前言
- 一、通过this.$emit触发父组件方法实现
- 二、.sync修饰符与$emit(update:xxx)
前言
看了几篇帖子，都没有将$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，回调函数中，会把接收到的值赋值给属性绑定的数据项中。
参考文字
vue中子组件更改父组件数据
Vue .sync修饰符与$emit(update:xxx)