在 Vue 中是使用插槽
摘要：
屬性傳值
先寫一段簡單的程式碼
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
Vue.compon...
屬性傳值
先寫一段簡單的程式碼
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`,
})
let vm = new Vue({
el: '#root'
})
這種寫法有兩個問題：
-
p標籤外面會有一層div，這個div是無法去掉的，有人會想，能不能用template代替，其實是不可以的，在這裡模版站位符是不能用的。 -
如果
content傳遞的內容很多，程式碼就會變得很難閱讀。
當我的子元件有一部分內容，是根據父元件傳遞過來的dom
進行顯示的話，這時候可以換一種語法。
插槽slot
<div id="root">
<child>
<p>Dell</p>//這種語法看起來非常像，用子元件，我向裡插入內容
</child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<slot></slot>//slot 標籤顯示的內容就是父元件向子元件插入進來的內容
</div>`,
})
let vm = new Vue({
el: '#root'
})
<p>Dell</p>
這種語法看起來非常像，用子組我向裡插入內容，所以我們把它叫做插槽。
slot
標籤顯示的內容就是父元件向子元件插入進來的內容。
通過插槽可以更方便的向子元件傳遞dom
元素，同時子元件只需通過slot
來使用就可以了。
slot
其他功能
如果子元件裡沒有dom
元素，可以讓它顯示預設內容，如下：
<slot>預設內容</slot>
具名插槽
如果現在有個需求是，header
和footer
是由外部引入的該怎麼弄呢？如下
<div id="root">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
Vue.component('body-content', {
props: {
content:String
},
template: `<div>
<slot name="header"></slot>
<div class="content">content</p>
<slot name="footer"></slot>
</div>`,
})
let vm = new Vue({
el: '#root'
})
slot
標籤name
屬性對應的是元件中slot
屬性，通過這種寫法，可以在呼叫子元件時，一次性傳遞多個區域的dom
結構，在子元件裡通過具名插槽來分別使用不同部分的dom
結構