唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > Vue.js单向数据流

Vue.js单向数据流

2017-10-06 分类:Vue.js专区 作者:管理员 阅读(10006)

什么叫单向数据流?

  • 官方解释:
  • prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

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

    个人理解:所谓单向数据流就是父组件的变量,子组件不能直接去修改它,而是通过迂回战术在父组件传递给子组件的数据通过data或者计算属性方式传递给子组件,子组件去改变这个新的变量对象,然后在子组件渲染这个新的变量对象,实际这个时候最开始的父组件变量并没有改变,也就是说改变的是一个新的变量并且是子组件内部改变了,如果你确实想把父组件最开始的变量改变。那么你就需要在父组件身上绑定自定义事件。在子组件发生交互(例如点击)后去触发监控父组件身上的自定义事件从而改变父组件的最开始的变量。

    单向数据流

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <!DOCTYPE html>
    <html lang="zh-cn">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
            <style>
               
            </style>
            <script src="./vue.js"></script>
        </head>

        <body>
            <div id="app">
                <h3>父组件中使用了count</h3>
                <p>{{count}}</p>
                <custom-component :count="count" @increment-click="countHandle"></custom-component>
            </div>
            <script>
           
                Vue.component('custom-component',{
                    props:{
                        count:{
                            validator:function (value){
                                return value > 10
                            }
                        }
                    },
                    data(){
                        return {
                            incrementCount:this.count  //作为局部这个组件的data的初始值
                        }
                    },
                    computed:{
                        incrementCount2(){
                            return this.incrementCount
                        }
                    },
                    template:`
                        <div>
                            <h2>我是一个自定义的组件</h2>
                            <input type="button" value="改变count的值" @click="changeCount(19940319)" />
                            {{incrementCount2}}
                        </div>
                    `,
                    methods:{
                        changeCount(ddd){
                            this.incrementCount++;
                            //通知父组件 发生了改变
                            this.$emit("increment-click",ddd)  
                        }
                    }
                })

                new Vue({
                    el:"#app",
                    data:{
                        count:20
                    },
                    methods:{
                        countHandle(ddd){
                            //alert("子组件点击了");
                            this.count++;
                            console.log(ddd)
                        }
                    }
                })
            </script>
        </body>
    </html>

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞(6) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    6

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    共有 1 条评论 - Vue.js单向数据流

    1. 笑八达 Windows 7 搜狗浏览器 2.X

      感受学习的力量!

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

    站点统计

    • 文章总数: 220 篇
    • 草稿数目: 0 篇
    • 分类数目: 14 个
    • 独立页面: 6 个
    • 评论总数: 969 条
    • 链接总数: 13 个
    • 标签总数: 406 个
    • 建站时间: 950 天
    • 注册用户: 1417 人
    • 访问总量: 8708445 次
    • 最近更新: 2019年7月17日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线