Vue 组件（一）父组件向子组件传递数据

一、父组件经过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>

运行结果：

输入数字以后：

二、单向数据流（改变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>