美文网首页
单向数据流

单向数据流

作者: 葵自渡_ | 来源:发表于2019-05-23 10:46 被阅读0次

    概念:

    1、父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。
    2、每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop

    试图改变prop的两种情况:

    1、 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:

    <body>
        <div id="app">
            <!-- a、父组件通过属性绑定的方式传值 -->
            <counter :count="0"></counter>
            <counter :count="1"></counter>
        </div>
        <script>    
            var counter={
                //b、子组件接收父组件的传值
                props:['count'],  
                //c、把父组件传来的值放入模板中渲染
                template:"<div @click='handleClick'>{{number}}</div>",
                data:function(){
                    return{
                        //复制一份,子组件就可以修改了
                        number:this.count
                    }
                },
                methods:{
                    handleClick:function(){
                        //不能直接这么写,因为子组件不能修改父组件的传值
                        // this.count++
                        this.number++
                    }
                }
            }
             var app = new Vue({
                el:'#app',
                //注册局部组件
                components:{
                    counter:counter
                }       
            })
        </script>
    </body>
    

    2、 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:(见官网)

    props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }
    

    相关文章

      网友评论

          本文标题:单向数据流

          本文链接:https://www.haomeiwen.com/subject/uffvzqtx.html