Vue:slot用法
摘要：
單個 Slot
在子元件內使用特殊的<slot>元素就可以為這個子元件新增一個 slot (插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的<slot>標籤及它的內容.示例程式碼如下:
<!DOCTYPE h...
單個 Slot
在子元件內使用特殊的<slot>元素就可以為這個子元件新增一個 slot (插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的<slot>標籤及它的內容.示例程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <child-component> <p>分發的內容</p> <p>更多分發的內容</p> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: '\ <div>\ <slot>\ <p>如果父元件沒用插入內容,我將作為默認出現</p>\ </slot>\ </div>' }); var app = new Vue({ el: '#app' }) </script> </body> </html>
子元件 child-component 的模板內定義一個 <slot> 元素,並且用一個 <p> 作為預設的內容,在父元件沒有使用 slot 時,會渲染這段預設的文字;如果寫入了 slot ,那就會替換整個 <slot>.所以上列渲染後的結果為:
<div id="app"> <div> <p>分發的內容</p> <p>更多分發的內容</p> </div> </div>
注意:子元件<slot>內的備用內容,它的作用域時子元件本身.
具名 Slot
給 <slot> 元素指定一個 name 後可以分發多個內容,具名 Slot 可以與單個 Slot 共存,例如下面的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<child-component>
<h2 slot="header">標題</h2>
<p>正文內容</p>
<p>更多正文內容</p>
<div slot="footer">底部資訊</div>
</child-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component', {
template: '\
<div class="component">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
子元件內聲明瞭3個 <slot> 元素,其中在<div class="main">內的<slot> 沒用使用 name 特性,它將作為預設 slot 出現,父元件沒有使用 slot 特性的元素與內容都將出現在這裡.
如果沒有指定預設的匿名 slot, 父元件內多餘的內容片段都將被拋棄.
上例最終渲染後的結果為:
<div id="app"> <div class="container"> <div class="header"> <h2>標題</h2> </div> <div class="main"> <p>正文內容</p> <p>更多的正文內容</p> </div> <div class="footer"> <div>底部資訊</div> </div> </div> </div>
在組合使用元件時,內容分發API至關重要.