Vue內容分發(fā)slot(全面解析)
前面的話
為了讓組件可以組合，需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為 內容分發(fā) (或 “transclusion” )。Vue實現了一個內容分發(fā) API，參照了當前 Web 組件規(guī)范草案，使用特殊的 <slot> 元素作為原始內容的插槽。本文將詳細介紹Vue內容分發(fā)slot
編譯作用域
在深入內容分發(fā) API 之前，先明確內容在哪個作用域里編譯。假定模板為
<child-component>
{{ message }}
</child-component>
message 應該綁定到父組件的數據，還是綁定到子組件的數據？答案是父組件。組件作用域簡單地說是：父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。
一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法：
<!-- 無效 --> <child-component v-show="someChildProperty"></child-component>
假定someChildProperty是子組件的屬性，上例不會如預期工作。父組件模板不應該知道子組件的狀態(tài)
如果要綁定作用域內的指令到一個組件的根節(jié)點，應當在組件自己的模板上做：
Vue.component('child-component', {
// 有效，因為是在正確的作用域內
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})
類似地，分發(fā)內容是在父作用域內編譯
默認丟棄
一般地，如果子組件模板不包含<slot>插口，父組件的內容將會被丟棄
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p>測試內容</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
<div id="example">
<parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
template: `
<div class="child">
<p>子組件</p>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p>測試內容</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
// 創(chuàng)建根實例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
如下圖所示，<child>所包含的<p>測試內容</p>被丟棄
匿名slot
當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標簽本身
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot></slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p>測試內容</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
如果出現多于1個的匿名slot，vue將報錯
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot></slot>
<slot></slot>
</div>
`,
};
【默認值】
最初在 <slot> 標簽中的任何內容都被視為備用內容，或者稱為默認值。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容
當slot存在默認值，且父元素在<child>中沒有要插入的內容時，顯示默認值
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot><p>我是默認值</p></slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child></child>
</div>
`,
components: {
'child': childNode
},
};
當slot存在默認值，且父元素在<child>中存在要插入的內容時，則顯示設置值
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot><p>我是默認值</p></slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p>我是設置值</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
具名Slot
<slot> 元素可以用一個特殊的屬性 name 來配置如何分發(fā)內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot name="my-header">頭部默認值</slot>
<slot name="my-body">主體默認值</slot>
<slot name="my-footer">尾部默認值</slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p slot="my-header">我是頭部</p>
<p slot="my-footer">我是尾部</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
仍然可以有一個匿名 slot，它是默認 slot，作為找不到匹配的內容片段的備用插槽。匿名slot只能作為沒有slot屬性的元素的插槽，有slot屬性的元素如果沒有配置slot，則會被拋棄
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot name="my-body">主體默認值</slot>
<slot></slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p slot="my-body">我是主體</p>
<p>我是其他內容</p>
<p slot="my-footer">我是尾部</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
<p slot="my-body">插入<slot name="my-body">中，<p>我是其他內容</p>插入<slot>中，而<p slot="my-footer">被丟棄
如果沒有默認的 slot，這些找不到匹配的內容片段也將被拋棄
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot name="my-body">主體默認值</slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<p slot="my-body">我是主體</p>
<p>我是其他內容</p>
<p slot="my-footer">我是尾部</p>
</child>
</div>
`,
components: {
'child': childNode
},
};
<p>我是其他內容</p>和<p slot="my-footer">都被拋棄
作用域插槽
作用域插槽是一種特殊類型的插槽，用作使用一個 (能夠傳遞數據到) 可重用模板替換已渲染元素。
在子組件中，只需將數據傳遞到插槽，就像將 props 傳遞給組件一樣
<div class="child"> <slot text="hello from child"></slot> </div>
在父級中，具有特殊屬性 scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象
var childNode = {
template: `
<div class="child">
<p>子組件</p>
<slot xxx="hello from child"></slot>
</div>
`,
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<template scope="props">
<p>hello from parent</p>
<p>{{ props.xxx }}</p>
</template>
</child>
</div>
`,
components: {
'child': childNode
},
};
如果渲染以上結果，得到的輸出是
【列表組件】
作用域插槽更具代表性的用例是列表組件，允許組件自定義應該如何渲染列表每一項
var childNode = {
template: `
<ul>
<slot name="item" v-for="item in items" :text="item.text">默認值</slot>
</ul>
`,
data(){
return{
items:[
{id:1,text:'第1段'},
{id:2,text:'第2段'},
{id:3,text:'第3段'},
]
}
}
};
var parentNode = {
template: `
<div class="parent">
<p>父組件</p>
<child>
<template slot="item" scope="props">
<li>{{ props.text }}</li>
</template>
</child>
</div>
`,
components: {
'child': childNode
},
};
以上這篇Vue內容分發(fā)slot(全面解析)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue微信分享鏈接添加動態(tài)參數的實現方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue+webpack實現異步加載的三種用法，文中給大家提到了vue+webpack實現異步組件加載的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
最近在學習前端制作了一個購物車小球的動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-09-09
今天小編就為大家分享一篇vue2 設置router-view默認路徑的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Axios是一個基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07
小編這次要給大家分享的是如何實現vue2.x數組劫持，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
下面小編就為大家分享一篇vue實現圖片加載完成前的loading組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue-router 組件的高級應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10