上一節(jié)談到有關(guān)Vue.js組件中“傳參”的概念揍魂，我們使用的是Prop物独，也就是在標(biāo)簽上自定義屬性來向子組件傳遞數(shù)據(jù)重荠。這一節(jié)我們繼續(xù)談?wù)劇皞鲄ⅰ保徊贿^這次不是通過自定義屬性挤安，而是通過一個固定的自定義標(biāo)簽<slot>谚殊，它有個比較特別的名字：插槽。
同樣還是前面的例子蛤铜，只不過有一點(diǎn)點(diǎn)小改動：
<!--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);
}
}
});
// 實(shí)例調(diào)用組件方法
var vm = new Vue({
el: '#app',
methods: {
showTips: function(){
popTips('支付成功');
}
}
});
function popTips(text){
vm.$refs.tips.popTips(text);
}
我在提示文字前添加了一張圖片嫩絮，這張圖片路徑通過Prop傳遞給子組件，效果如下圖：
這效果就是典型的微信彈出提示围肥。當(dāng)然剿干，若不傳src屬性，效果就只是純文字提示：
<!--HTML-->
<pop-tips ref="tips"></pop-tips>
這就是組件靈活性的好處穆刻。那么置尔，插槽到底是個什么東西呢？我們該如何使用它呢氢伟？
別著急榜轿，前面只是鋪墊篮愉，接下來請聽我娓娓道來~
同樣是以上效果，我們也可以使用插槽來實(shí)現(xiàn)它：
<!--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內(nèi)容如下：
<div class="pop-tips"><span><img src="./imgs/success.png" alt="">支付成功</span></div>
也就是說組件模板中的<slot>標(biāo)簽是用于指定從父組件傳入內(nèi)容的替換位置差导，示例中就是將<slot>標(biāo)簽替換成<img>標(biāo)簽。當(dāng)然猪勇，使用插槽有一個好處就是我們可以更加靈活地自定義組件设褐，我們可以傳入其他標(biāo)簽，也可以不傳任何內(nèi)容泣刹。
同樣的助析，我們也可以給插槽設(shè)置默認(rèn)值：
//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>',
//……
});
也就是將默認(rèn)值放在<slot>標(biāo)簽中，但是這樣做的話椅您，無論你有沒有傳圖片外冀，最終渲染結(jié)果都會帶有這張默認(rèn)圖片的。
說了這么多掀泳，在實(shí)際運(yùn)用當(dāng)中雪隧，什么時候我們應(yīng)該使用Prop來“傳參”，而什么時候我們又應(yīng)該用<slot>元素呢员舵？
以下是我個人簡單的總結(jié)：
Prop：用于傳遞簡單數(shù)據(jù)脑沿，適合需要自定義內(nèi)容比較少的情況
<slot>: 用于傳遞標(biāo)簽內(nèi)容，適合需要自定義內(nèi)容比較復(fù)雜的情況马僻，相對Prop來說更加靈活
所以說庄拇，以上所舉的例子如果僅僅是為了能夠自定義圖片的話，完全可以只使用Prop來實(shí)現(xiàn)韭邓。
本文重點(diǎn)總結(jié)：
① 父組件向子組件傳遞數(shù)據(jù)最常用方法是Prop和<slot>
② Prop傳遞的數(shù)據(jù)是標(biāo)簽屬性值措近，組件內(nèi)props屬性接收數(shù)據(jù)；<slot>傳遞的數(shù)據(jù)是子標(biāo)簽元素女淑，組件內(nèi)<slot>元素接收數(shù)據(jù)并且被替換
