vue-单向数据流

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传递给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。 message:{val:""}

<body>
    <div id="app">
        <father></father>
    </div>
    <template id="father">
        <div>
            <input type="text" v-model="msg.value">
            <hr>
            <son :msg="msg"></son>
        </div>
    </template>
    <template id="son">
        <div>
            <input type="text" v-model="msg.value">
        </div>
    </template>
</body>
<script>
    Vue.component("father",{
        template:"#father",
        data(){
            return {
                msg:{ //父组件可以将msg这个地址引用传递子组件，此时，子组件修改数据，父组件也跟着修改
                    value:"father"
                }
            }
        },
        components:{
            son:{
                props:["msg"],
                template:"#son"
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>

组件间的数据调用

组件、实例对象上有这样的属性：$parent,$children,$root,

这样的话，就形成了viewmodel链(关系链)，

理论上来说，任何两个组件之间的数据都可以互相调用，获取

缺点：如果组件很多的话，写出来的代码会很乱

<body>
    <div id="app">
        <aaa></aaa>
    </div>
    <!--创建组件a-->
    <template id="aaa">
        <div>
            <p>这是A组件...</p>
            <input type="text" v-model="msg">
            <hr>
            <bbb :msg="msg"></bbb>  
        </div>
    </template>
      <!--创建组件b-->
    <template id="bbb">
        <div>
            <input type="text" v-model="ownMsg">
        </div>
    </template>
</body>

<script>
    Vue.component("aaa",{
        template:"#aaa",
        data(){
            return {
                msg:"hello"
            }
        }
    })
    Vue.component("bbb",{
        template:"#bbb",
        props:["msg"],
        computed:{
            ownMsg:{
                get(){
                    return this.msg
                },
                set(val){
                    //希望父组件aaa的msg变成val
                    // this.msg = val
                    this.$parent.msg = val   
                }
            }
        }
    })
    var vm = new Vue({
        el:"#app"
    })
</script>

v-model 可以用在组件通信？

可以的。在组件上面使用v-model指令，相当于绑定了value属性与监听input事件。

posted @ 2020-08-13 21:22  Cupid05  阅读(33)  评论(0)  编辑  收藏  举报