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

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

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

//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: '
{{popText}}
',
    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属性，效果就只是纯文字提示：

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

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

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

//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '
{{popText}}
',
    //……
});

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

支付成功

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

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

//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '
{{popText}}
',
    //……
});

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

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

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

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

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

本文重点总结：

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