1、父组件通过props向子组件传递数据

组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。

组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种：

（1）字符串数组

我们构造一个数组，接收一个来自父级的数据message，并把它在组件模板中渲染。示例代码如下：

<div id="app">
    <child-component message="来自父组件的内容"></child-component>
</div>

    Vue.component('child-component',{
            props:['message'],
            template: `<div>{{ message }}</div>`
        });

    new Vue({
           el:'#app'                
        })

渲染结果：

（2）对象

当props需要验证时就需要对象写法，一般当你的组件需要提供给别人使用时，都推荐进行数据验证。比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。
以下是几个prop示例：

<script>
 Vue.component('my-component',{
                props:{
                    //必须是数字类型
                    propA: Number,

                    //必须是字符串或数字类型
                    propB: [String, Number],

                    //布尔值，如果没有定义，默认是true
                    propC: {
                        type:Boolean,
                        default:true
                    },

                    //数字，而且必须上传
                    propD: {
                        type: Number,
                        required:true
                    },

                    //自定义一个验证函数
                    propE: {
                        validator: function(value){
                            return value > 10;
                        }
                    },

                    //如果是数组或对象，默认必须是一个函数来返回
                    propF: {
                        type: Array,
                        default:function(){
                            return [];
                        }
                    }
                }
             });
    </script>

示例代码：

<div id="app">
    <!--由于HTML不区分大小写，所以当时用DOM模板时，驼峰命名的props名称(propA)要转为短横命名(prop-a)-->
    <my-component :prop-a="parentmessage"></my-component>
</div>

<script>
             Vue.component('my-component',{
                props:{
                    //必须是数字类型
                    propA: Number,
                },  
                template: `<div>{{ propA }}</div>`
             });

            new Vue({
                el:'#app',
                data:{
                    parentmessage:''
                }
            })
        </script>

运行结果：

输入数字之后：

2、单向数据流（改变prop）
业务中经常会遇到以下两种需要改变prop的情况：

（1）子组件将父组件传递进来的初始值保存起来，在自己作用域下随意使用和更改。—— 这种情况可以在组件data内声明一个数据，引用父组件的prop。

示例代码如下：

<div id="app">
<!--由于HTML不区分大小写，所以当时用DOM模板时，驼峰命名的initCount名称(propA)要转为短横命名(init-count)-->
    <my-component :init-count="1"></my-component>
</div>
<script>
    Vue.component('my-component',{
           props:['initCount'],
           data:function(){
                return{
                      count:this.initCount
                   }
            },  

           template: `<div>{{ count }}</div>`
             });

            new Vue({
                el:'#app',              
            })
        </script>

此时，就可以避免直接操作initCount了。

（2）prop作为需要被转变的原始值传入。——这种情况用计算属性就可以搞定了。

实例代码如下：

<div id="app">
            <my-component :width="100" :border="2" :height="30"></my-component>
        </div>
        <script>
             Vue.component('my-component',{
                props:['width','border','height'],              
                template: `<div :style="style">组件内容</div>`,

                //计算属性
                computed:{
                    style: function () {
                        return {
                            width: this.width + 'px',
                            border:this.border + 'px',
                            height:this.height + 'px'
                        }
                    }
                }
             });

            new Vue({
                el:'#app',

            })
        </script>