首页 > 其他 > 详细

单向数据流

时间:2018-10-16 23:32:53      阅读:222      评论:0      收藏:0      [点我收藏+]

在上一篇的父子组件中,我们知道,当我们使用动态props将父组件的数据传递到子组件的时候,如果父组件的数据变化,子组件的数据会随之变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <template id="aaa">
        <p @click="changeText">我是父组件</p>
        <bbb  :c-mess="pmsg"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    data(){
                        return {
                           pmsg:动态props,
                        }
                    },
                    template:#aaa,
                    methods:{
                        changeText(){
                            this.pmsg = 数据流
                        }
                    },
                    components:{
                        bbb:{
                             props:[c-mess],
                            template: `
                                <div>
                                    <div>我是子组件 --- {{cMess}}</div>
                                <div>
                            `,
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

技术分享图片  技术分享图片

父组件数据变化时,子组件数据会相应变化;而子组件数据变化时,父组件数据不变

我们知道,子组件的值是通过emit主动发送到父组件的,需要事件驱动,如果子组件的数据发生改变时,没有事件驱动,父组件的数据并不能随之更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <template id="aaa">
        <div>
            <span>父组件数据</span>
            <input v-model="msg">
        </div>
        <p>{{msg}}</p>
        <bbb :child-msg="msg"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:#box,
            components:{
                aaa:{
                     data(){
                        return {
                        msg:match
                        }
                    },
                    template:#aaa,
                    components:{
                        bbb:{
                            props:[childMsg],
                            template: `
                                 <div>
                                    <span>子组件数据</span>
                                    <input v-model="childMsg">
                                </div>
                                <p>{{childMsg}}</p>
                            `,
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

技术分享图片     技术分享图片

单向数据流

原文:https://www.cnblogs.com/yuyujuan/p/9800979.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!