vue父子传值之props

单向数据流

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

以上文字来自 Vue官网 

今天总结了下Vue实例中props属性的一些常用方法，主要是帮助自己和新人梳理思路，以便在项目和工作中更好的应用这个属性，因个人能力有限，有什么到不到的地方，欢迎留言一起探讨：

prop一般用于父组件向子组件进行单向通信（父向子传值），传递的可以是字符串、也可以是表达式、也可以是一个对象，也可以是一个数组，甚至是一个布尔值。

话不多说，直接上代码：

//父组件

<template>
  <div>
    <h1>{{title}}</h1>
    <Child
        :pMag='msg'
        :pExpression='msgExpA+msgExpB'
        :pObj='msgObj'
        :pObjMsg='msgObj.msg3'
        :pArray='msgArray'
        :pIsBoolean='isMsg'>
    </Child>
  </div>
</template>
<script>
    import Child from './Child'
    export default {
        name:'Father',
        components:{
            Child
        },
        data () {
            return {
                title:'这是父组件',
                msg:'我是父组件单向传过来的数据',
                msgExpA:'props也可以是一个表达式：我是表达式A',
                msgExpB:'，我是表达式B',
                msgObj:{
                    msg1:'props也可以是一个对象',
                    msg2:'另外，props也可以单传一个对象中的任一属性：',
                    msg3:'我是props对象中的属性msg3'
                },
                msgArray:[
                    {
                        id:1,
                        msg:'props也可以是一个数组',
                    },
                    {
                        id:2,
                        msg:'一般结合v-for来循环渲染',
                    },
                    {
                        id:3,
                        msg:'使用v-for时别忘了给key赋值哦～',
                    }
                ],
                isMsg:true
            }
        },
    };

</script>

//子组件

<template>
  <div class='child-box'>
    <h1>{{title}}</h1>
    <h1>{{pMag}}</h1>
    <br/>
    <h1>{{pExpression}}</h1>
    <br/>
    <h1>{{pObj.msg1}}</h1>
    <h1>{{pObj.msg2}}</h1>
    <br/>
    <h1>{{pObjMsg}}</h1>
    <br/>
    <ul>
        <li v-for='item in pArray' :key='item.id'>
            <h1>{{item.msg}}</h1>
        </li>
    </ul>
    <br/>
    <h1>props也可以是布尔类型,一般结合v-if和v-else使用</h1>
    <h1 v-if='pIsBoolean'>当你看见我，说明pIsBoolean是true</h1>
    <h1 v-else>当你看见我，说明pIsBoolean是false</h1>
  </div>
</template>
<script>
    export default {
        name:'Child',
        props:['pMag','pExpression','pObj','pObjMsg','pArray','pIsBoolean'],
        data () {
            return {
                title:'这是子组件'
            }
        }
    };
</script>


<style scoped>
.child-box{
    margin-top:100px;
}

</style>

效果图：