第一种，子组件通过监听父组件数据，子组件改变数据之后通知给父组件
原文链接：https://blog.csdn.net/m0_37728716/article/details/81776929
父组件 => props[parent-data] => 子组件 => watch[parent-data] => children-data = parent-data // 子组件监听父组件的改变
子组件 => $emit[children-data] => 父组件 => parant-data = children-data // 子组件通知父组件自身的改变
// 父组件
<template>
<div>
<Children :parentData="parentData" @getChildrenStatus="getChildrenStatus"></Children>
</div>
</template>
<script>
export default {
data(){
return {
parentData: 1
}
},
methods: {
getChildrenStatus: function(data){ // 实时更新子组件的变化
this.parentData = data
}
}
}
</script>
//子组件
<script>
export default {
data(){
return {
chiildrenData: 1
}
},
props: ['parentData'],
watch: {
parentData: function(){ // 监听父组件的变化
this.childrenData = this.parentData
}
},
mounted(){
this.$emit('getChildrenStatus', this.childrenData) // 将改变通知父组件(保证父子组件数据一致)
}
}
</script>
第二种 .sync 修饰符
在vue的组件通信props中，一般情况下，数据都是单向的，子组件不会更改父组件的值
那么vue提供.sync作为双向传递的关键字，实现了父组件的变动会传递给子组件，而子组件的foo改变时，通过事件机制，修改父组件的foo。完成了子组件newFoo和父组件foo的双向映射。
// 父组件
<Son :foo.sync="foo"></Son>
//子组件
props: ['foo'],
data: function () {
return {
newFoo: this.foo;
}
},
methods:{
add:function(){
this.newMsg=10;
this.$emit('update:foo',this.newFoo);
}
}
在一些情况下，可能会对一个props进行'双向绑定'，事实上 , '.sync'修饰符提供了此功能
- 当一个子组件改变了一个props 的值时，这个变化也会同步到父组件中所绑定的值
- 也会导致问题，因为破坏了‘单项数据流’的假设，由于子组件改变props的代码和普通代码改懂毫无区别，当光看子组件代码时，完全不知何时改变了父组件的状态
- 会被重新引入，扩展为一个自动更新父组件属性的v-on侦听器
- v-model毕竟不是给组件与组件之间通信而设计的双向绑定，无论从语意上和代码写法上都没有，'.sync'直观和方便
- 无论从v-model还是'.sync'修饰符来看，都离不开$emit 和 v-on 语法糖的封装，主要目的还是为了保证数据的正确单向流动与显示流动
<Son :foo.sync="sth"></Son> //.sync修饰符
<Son :foo="sth" @update:foo="value=>sth=value"></Son>
- ：foo则是Son 子组件需要从父组件props接受的数据
- 通过事件显示监听update:foo（foo则是props显示监听的数据)，通过箭头函数执行回调，把函数传给sth，则就形成一种双向绑定循环链条
- 当子组件需要更新foo的值时，需显示地触发更新事件
this.$emit('update:foo',newValue)
同时父组件@update:foo 也是依赖子组件的显示触发，这样可以轻松的捕捉到了数据的正常流动
- 第一个参数则是 update 则是显示更新的事件，跟在后面的 :foo 则是需要改变对应的props值
- 第二个参数传入的是希望父组件foo数据里将要变化的值，以及用于父组件接受update时更新数据
warn: 子组件改变父组件的数据时，update冒号后面的参数和父组件传递进来的值是同步的，想改变哪个，则冒号后面的值对应的就是哪个，两者相互对应，必填