Vue父子组件数据双向绑定，子组件可修改props

第一种，子组件通过监听父组件数据，子组件改变数据之后通知给父组件

原文链接：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冒号后面的参数和父组件传递进来的值是同步的，想改变哪个，则冒号后面的值对应的就是哪个，两者相互对应，必填