手把手教你玩转Vue.js组件（二）

这次我们讲讲Vue.js中组件中“传参”的概念，也就是父组件向子组件通信的问题，这一点与函数中的参数传递很像。

我们同样使用上篇文章中的例子：

<!--HTML-->
<pop-tips ref="tips"></pop-tips>
           

//pop-tips组件
Vue.component('pop-tips',{
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },2000);
        }
    }
});
           

这个例子中，pop-tips文字提示显示出来后会在2秒之后消失，但是如果我想要让它1秒后消失呢？

你可能会说那还不简单，直接把组件中的2000改成1000不就行了嘛。

你作为一个开发组件的人改起来当然容易，但是组件使用者可能不止你一个人哦，其他人可不想关心你组件的具体实现代码！

那么这时候组件的灵活性就显得非常重要，我们能不能像函数传参一样直接给组件传个时间参数就能改变pop-tips组件的显示时长呢？

答案当然是肯定的，例如：

<!--HTML-->
<pop-tips ref="tips" :duration="1"></pop-tips>   <!--传入的参数名为duration，参数值为1，表示1s后消失-->
           

需要注意的是，这里

duration

前需要加上

v-bind:

或者

:

，因为这里需要传入的是数字1，如果直接写

duration="1"

，那么传入组件的将会是个字符串！！

//pop-tips组件
Vue.component('pop-tips',{
    props: ['duration'],   // 用于接收外部所传入的数据
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },this.duration*1000);   // 调用外部数据时与调用data中数据的方式一致
        }
    }
});
           

我们可以在定义组件时，给选项对象添加一个

props

属性，该属性可以是一个数组，其中的元素是组件HTML的部分所定义的自定义属性名称（如示例中的

duration

属性），这时候在组件内部我们就可以像使用组件内部数据一样使用这些外部传进来的数据了。

但是，这样做可能会造成一些意外的情况。比如说另一个开发者拿到这个组件，但是他并不知道要传这个duration（可能以为它有个默认的时间），或者他一不小心传错了数据类型，等等。

对于这种情况，我们可以对该组件继续进一步的改进，以提高代码的健壮性。例如：

//pop-tips组件
Vue.component('pop-tips',{
    props: {  // 用于接收外部所传入的数据
        duration: {
            type: Number,   // 必须是数字类型
            default: 2,   // 不写该属性时默认为2
            validator: function (value) { 
                return value <= 3;   // 校验必须小于或等于3
            }
        }
    }, 
    // ……
});
           

或者不写默认值，而是强制要求写上

duration

属性：

//pop-tips组件
Vue.component('pop-tips',{
    props: {  // 用于接收外部所传入的数据
        duration: {
            type: Number,   // 必须是数字类型
            required: true,   // 强制要求写该属性
            validator: function (value) { 
                return value <= 3;   // 校验必须小于或等于3
            }
        }
    }, 
    // ……
});
           

通过以上代码我们可以知道，组件定义中的选项对象的

props

属性除了可以是数组外，还可以是对象，而对象名就是外部传入的参数名，对象值可以是个对象，其中可以包含参数类型、默认值、是否必传、校验方法等。

有了上面这些限制之后，组件的使用者就得按照这些规则来使用了，一旦不符合某个规则，那么控制台就可能会有相应的警告提示。

结束语： 有关Vue.js组件“传参”今天就讲到这里，总之就是使用

props

来实现父组件到子组件的数据传递。