vue的单项数据流和sync实现父子组件双向绑定

vue的单项数据流

• 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

• 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

• 如果是一个对象或者数组，那么当子组件改变时，也会影响到父组件；是由于是同一个空间地址的原因；（破坏了单项数据流）

上个例子说明一下

<div id="app">
    <div @click="fn">{{msg}}</div>
    <son :m="msg"></son>
</div>

let vm = new Vue({
        el:"#app",
        data: {
            msg:"hello"
        },
        methods:{
            fn(){
                this.msg = "hahaha"
            }
        },
        components:{
            son:{
                data(){
                     return {}
                },
                props:["m"],
                // props : 会把这个属性放到当前的组件的实例的属性上；
                // 通过props传递过来的数据也具有响应式；但是不能再次传递父组件；
                template:"<div @click='fn'>{{m}}</div>",
                methods:{
                    fn(){
                        // 在组件的函数或者事件中，那么函数中的this指向了当前组件的实例；
                        console.log(this);
                        console.log(this.m);
                        this.m = "world";
                    }
                }
            }
        }
    });

以上代码虽然能够实现子组件的数据更改父组件的数据，但是这样做控制台会发出警告：

image.png

并且做出了正确的提示
使用data属性或者computed属性接收一下这个prop的值，然后在做响应的改变，并且不能和prop的值重名，像这样：

props: ['m'],
data: function () {
  return {
    counter: this.m
  }
}

或者这样

props: ['m'],
computed: {
  mc: function () {
    return this.m.trim().toLowerCase()//这里做对于prop的值的一些处理
  }
}

最后的效果是，子组件中能够随意使用prop的值，又不会改变父级的数据，应为用data或者computed做了一层拦截

let vm = new Vue({
        el:"#app",
        data: {
            msg:"hello"
        },
        methods:{
            fn(){
                this.msg = "hahaha"
            }
        },
        components:{
            son:{
                data(){
                     return {con:this.m}
                },
                props:["m"],
                // props : 会把这个属性放到当前的组件的实例的属性上；
                // 通过props传递过来的数据也具有响应式；但是不能再次传递父组件；
                template:"<div @click='fn'>{{m}}<br>{{con}}</div>",
                methods:{
                    fn(){
                        // 在组件的函数或者事件中，那么函数中的this指向了当前组件的实例；
                        console.log(this.m);
                        this.con = "world";
                        console.log(this.con)
                    }
                }
            }
        }
    });

sync修饰符实现父子组件数据的双向绑定

• 父组件的数据改变影响子组件数据，子组件数据改变影响父组件数据，本质上父传子数据用的props，子传父数据用的是发布订阅

上个例子：

<div id="app">
    {{money}}
    <!--绑定自定义事件的过程，就是订阅的过程；-->
    <!--叫发布订阅的语法糖：简写-->
    <!--<child  v-bind:m="money" v-on:update:m="money=$event"></child>-->
    <child :m.sync="money"></child>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            money : 400
        },
        components:{
            child:{
                data(){
                    return {}
                },
                props:["m"],
                template:"<div>{{m}}<button @click='fn'>改变数据</button></div>",
                methods:{
                    fn(){
                        // 希望在fn执行时，触发父组件身上的change方法；
                        this.$emit("update:m",888)
                    }
                }
            }
        }

    });
</script>

• 子组件中不操作props属性，而是直接$emit事件和数据，直接改变父组件的数据

<child  v-bind:m="money" v-on:update:m="money=$event"></child>
$event是子组件$emit 发布的数据888
<child :m.sync="money"></child>
.sync只是update的简写的一个语法糖