上一节谈到有关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>元素接收数据并且被替换
