Vue中怎么使用slot實現(xiàn)內(nèi)容分發(fā)-創(chuàng)新互聯(lián)
這篇文章給大家介紹Vue中怎么使用slot實現(xiàn)內(nèi)容分發(fā)，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項目策劃、軟件開發(fā)，軟件安全維護、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、網(wǎng)站制作，
app軟件定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。
創(chuàng)新互聯(lián)深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
編譯作用域
在深入內(nèi)容分發(fā) API 之前，先明確內(nèi)容在哪個作用域里編譯。假定模板為
{{ message }}
message 應(yīng)該綁定到父組件的數(shù)據(jù)，還是綁定到子組件的數(shù)據(jù)？答案是父組件。組件作用域簡單地說是：父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。
一個常見錯誤是試圖在父組件模板內(nèi)將一個指令綁定到子組件的屬性/方法：
假定someChildProperty是子組件的屬性，上例不會如預(yù)期工作。父組件模板不應(yīng)該知道子組件的狀態(tài)
如果要綁定作用域內(nèi)的指令到一個組件的根節(jié)點，應(yīng)當(dāng)在組件自己的模板上做：
Vue.component('child-component', {
// 有效，因為是在正確的作用域內(nèi)
template: 'Child ',
data: function () {
return {
someChildProperty: true
}
}
})
類似地，分發(fā)內(nèi)容是在父作用域內(nèi)編譯
默認丟棄
一般地，如果子組件模板不包含插口，父組件的內(nèi)容將會被丟棄
var parentNode = {
template: `
父組件
測試內(nèi)容
`,
components: {
'child': childNode
},
};
如下圖所示，所包含的測試內(nèi)容
被丟棄
匿名slot
當(dāng)子組件模板只有一個沒有屬性的 slot 時，父組件整個內(nèi)容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標(biāo)簽本身
var childNode = {
template: `
子組件
`,
};var parentNode = {
template: `
父組件
測試內(nèi)容
`,
components: {
'child': childNode
},
};
如果出現(xiàn)多于1個的匿名slot，vue將報錯
var childNode = {
template: `
子組件
`,
};
【默認值】
最初在
當(dāng)slot存在默認值，且父元素在中沒有要插入的內(nèi)容時，顯示默認值
var childNode = {
template: `
子組件
我是默認值
`,
};
var parentNode = {
template: `
父組件
`,
components: {
'child': childNode
},
};
當(dāng)slot存在默認值，且父元素在中存在要插入的內(nèi)容時，則顯示設(shè)置值
var childNode = {
template: `
子組件
我是默認值
`,
};
var parentNode = {
template: `
父組件
我是設(shè)置值
`,
components: {
'child': childNode
},
};
具名Slot
name 來配置如何分發(fā)內(nèi)容。多個 slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對應(yīng) slot 特性的元素
var childNode = {
template: `
子組件
頭部默認值
主體默認值
尾部默認值
`,
};var parentNode = {
template: `
父組件
我是頭部
我是尾部
`,
components: {
'child': childNode
},
};
仍然可以有一個匿名 slot，它是默認 slot，作為找不到匹配的內(nèi)容片段的備用插槽。匿名slot只能作為沒有slot屬性的元素的插槽，有slot屬性的元素如果沒有配置slot，則會被拋棄
var childNode = {
template: `
子組件
主體默認值
`,
};var parentNode = {
template: `
父組件
我是主體
我是其他內(nèi)容
我是尾部
`,
components: {
'child': childNode
},
};插入中，我是其他內(nèi)容
插入中，而被丟棄
如果沒有默認的 slot，這些找不到匹配的內(nèi)容片段也將被拋棄
var childNode = {
template: `
子組件
主體默認值
`,
};var parentNode = {
template: `
父組件
我是主體
我是其他內(nèi)容
我是尾部
`,
components: {
'child': childNode
},
};我是其他內(nèi)容
和都被拋棄
作用域插槽
作用域插槽是一種特殊類型的插槽，用作使用一個 (能夠傳遞數(shù)據(jù)到) 可重用模板替換已渲染元素。
在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像將 props 傳遞給組件一樣
在父級中，具有特殊屬性 scope 的 元素必須存在，表示它是作用域插槽的模板。scope 的值對應(yīng)一個臨時變量名，此變量接收從子組件中傳遞的 props 對象
var childNode = {
template: `
子組件
`,
};
var parentNode = {
template: `
父組件
hello from parent
{{ props.xxx }}
`,
components: {
'child': childNode
},
};如果渲染以上結(jié)果，得到的輸出是
【列表組件】
作用域插槽更具代表性的用例是列表組件，允許組件自定義應(yīng)該如何渲染列表每一項
var childNode = {
template: `
`,
data(){
return{
items:[
{id:1,text:'第1段'},
{id:2,text:'第2段'},
{id:3,text:'第3段'},
]
}
}
};var parentNode = {
template: `
父組件
{{ props.text }}
`,
components: {
'child': childNode
},
};
關(guān)于Vue中怎么使用slot實現(xiàn)內(nèi)容分發(fā)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
新聞名稱：Vue中怎么使用slot實現(xiàn)內(nèi)容分發(fā)-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/gsipg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
