vue组件详解（二）——使用props传递数据

在 Vue 中，父子组件的关系能够总结为 props向下传递，事件向上传递。父组件经过 props 给子组件下发数据，子组件经过事件给父组件发送消息。看看它们是怎么工做的。

 1、基本用法

组件不单单是要把模板的内容进行复用，更重要的是组件间要进行通讯。

在组件中，使用选项props 来声明须要从父级接收的数据， props 的值能够是两种， 一种是字符串数组，一种是对象。

1.1　字符串数组：

       <div id="app4">
            <my-component4 message="数据来自父组件"></my-component4>
        </div>

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

var app4 = new Vue({
    el: '#app4'
});

渲染后的结果为：
<div id= ” app4”>
　　<div ＞来自父组件的数据＜／ div>
</div>

 props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件本身的数据，做用域是组件自己，这两种数据均可以在模板template 及计算属性computed和方法methods 中使用。

上例的数据message 就是经过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，若是要传递多个数据，在props 数组中添加项便可。

 

有时候，传递的数据并非直接写死的，而是来自父级的动态数据，这时可使用指令v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。

        <div id="app5">
            <input type="text" v-model="text">
            <my-component5 :my-text="text"></my-component5>
        </div>

Vue.component('my-component5',{
    props: ['myText'],
    template: '<div>{{myText}}</div>'
});

var app5 = new Vue({
    el: '#app5',
    data: {
        text: '动态传递父组件数据'
    }
});

注意的几个点：

1.若是你要直接传递数字、布尔值、数组、对象，并且不使用v-bind ，传递的仅仅是字符串。

2.若是你想把一个对象的全部属性做为 prop 进行传递，可使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

 

1.2　对象：

当prop 须要验证时，就须要对象写法。

通常当你的组件须要提供给别人使用时，推荐都进行数据验证，好比某个数据必须是数字类型，若是传入字符串，就会在控制台弹出警告。

        <div id="app6">
            <input type="text" v-model="number">
            <my-component6 :my-text="number"></my-component6>
        </div>

Vue.component('my-component6',{
    props: {
      'myText':{
          type: Number, //必须是数字类型的
          required: true,    //必须传值
          default: 1    //若是未定义，默认值就是1
      }
    },
    template: '<div>{{myText}}</div>'
});

var app6 = new Vue({
    el: '#app6',
    data: {
        number: 1
    }
});

验证的type 类型能够是：
• String
• Number
• Boolean
• Object
• Array
• Function
type 也能够是一个自定义构造器，使用instanceof 检测。
当prop 验证失败时，在开发版本下会在控制台抛出一条警告。

 

2、单向数据流

Vue 2.x 与Vue l.x 比较大的一个改变就是， Vue2.x 经过props 传递数据是单向的了， 也就是父组件数据变化时会传递给子组件，可是反过来不行。

业务中会常常遇到两种须要改变prop 的状况，

2.1　一种是父组件传递初始值进来，子组件将它做为初始值保存起来，在本身的做用域下能够随意使用和修改。（Prop 做为初始值传入后，子组件想把它看成局部数据来用；）

这种状况能够在组件data 内再声明一个数据，引用父组件的prop ，示例代码以下：

        <div id="app7">
            <my-component7 :init-count="1"></my-component7>
        </div>

Vue.component('my-component7',{
    props: ['initCount'],
    template: '<div>{{count}}</div>',
    data: function(){
        return {
            count: this.initCount
        }
    }
});
var app7 = new Vue({
    el: '#app7'
});

组件中声明了数据count ， 它在组件初始化时会获取来自父组件的initCount ， 以后就与之无关了，只用维护c ount ， 这样就能够避免直接操做initCount 。

 

2.2　prop 做为须要被转变的原始值传入。（Prop 做为原始数据传入，由子组件处理成其它数据输出。）

这种状况用计算属性就能够了， 示例代码以下：

        <div id="app8">
            <my-component8 :width="100"></my-component8>
        </div>

Vue.component('my-component8',{
    props: ['width'],
    template: '<div :style="style">组件内容</div>',
    computed: {
        style: function(){
            return {
                width: this.width+'px'
            }
        }
    }
});
var app8 = new Vue({
    el: '#app8'
});

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，若是 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。