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

上一节谈到有关Vue.js组件中“传参”的概念，我们使用的是Prop，也就是在标签上自定义属性来向子组件传递数据。这一节我们继续谈谈“传参”，只不过这次不是通过自定义属性，而是通过一个固定的自定义标签<slot>，它有个比较特别的名字：插槽。

同样还是前面的例子，只不过有一点点小改动：

<!--HTML-->
<pop-tips ref="tips" src="./imgs/success.png"></pop-tips>

//pop-tips组件
Vue.component('pop-tips',{
    props: {
        duration: {
            type: Number,
            default: 2,
            validator: function (value) {
                return value <= 3;
            }
        },
        src: ''
    },
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span><img v-if="src" :src="src" alt=""/>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },this.duration*1000);
        }
    }
});
// 实例调用组件方法
var vm = new Vue({
    el: '#app',
    methods: {
        showTips: function(){
            popTips('支付成功');
        }
    }
});
function popTips(text){
    vm.$refs.tips.popTips(text);
}

我在提示文字前添加了一张图片，这张图片路径通过Prop传递给子组件，效果如下图：

这效果就是典型的微信弹出提示。当然，若不传src属性，效果就只是纯文字提示：

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

这就是组件灵活性的好处。那么，插槽到底是个什么东西呢？我们该如何使用它呢？

别着急，前面只是铺垫，接下来请听我娓娓道来~

同样是以上效果，我们也可以使用插槽来实现它：

<!--HTML-->
<pop-tips ref="tips">
    <!--替代组件中的slot元素-->
    <img src="./imgs/success.png" alt=""/>
</pop-tips>

//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '<div class="pop-tips" :class="{show: popShow}"><span><slot></slot>{{popText}}</span></div>',
    //……
});

最终页面上的渲染出来的HTML内容如下：

<div class="pop-tips"><span><img src="./imgs/success.png" alt="">支付成功</span></div>

也就是说组件模板中的<slot>标签是用于指定从父组件传入内容的替换位置，示例中就是将<slot>标签替换成<img>标签。当然，使用插槽有一个好处就是我们可以更加灵活地自定义组件，我们可以传入其他标签，也可以不传任何内容。

同样的，我们也可以给插槽设置默认值：

//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '<div class="pop-tips" :class="{show: popShow}"><span><slot><img src="./imgs/success.png" alt=""/></slot>{{popText}}</span></div>',
    //……
});

也就是将默认值放在<slot>标签中，但是这样做的话，无论你有没有传图片，最终渲染结果都会带有这张默认图片的。

说了这么多，在实际运用当中，什么时候我们应该使用Prop来“传参”，而什么时候我们又应该用<slot>元素呢？

以下是我个人简单的总结：

Prop：用于传递简单数据，适合需要自定义内容比较少的情况
<slot>: 用于传递标签内容，适合需要自定义内容比较复杂的情况，相对Prop来说更加灵活

所以说，以上所举的例子如果仅仅是为了能够自定义图片的话，完全可以只使用Prop来实现。

本文重点总结：

① 父组件向子组件传递数据最常用方法是Prop和<slot>
② Prop传递的数据是标签属性值，组件内props属性接收数据；<slot>传递的数据是子标签元素，组件内<slot>元素接收数据并且被替换