Vue 中使用插槽
阿新 • • 發佈：2018-11-05
“插槽” 的概念還是挺重要的。在很多Vue 第三方外掛 或 模組中，大量使用了插槽特性。
他的使用，首先，定義一個元件：
<body> <div id="root"> <child></child> </div> <script> Vue.component("child",{ template: "<div><p>hello</p></div>" }) var vm = new Vue({ el: "#root" }) </script> </body>
然後，子元件裡希望展示父元件傳遞過來的內容：
<div id="root"> <child content="<p>say hi</p>"></child> </div> <script> Vue.component("child",{ props: ["content"], template: "<div><p>hello</p>{{content}}</div>" }) var vm = new Vue({ el: "#root" }) </script>
上面的程式碼得到的結果，不是我們期望的，因為會這樣：
那麼就需要使用v-html 命令了：
<div id="root"> <child content="<p>say hi</p>"></child> </div> <script> Vue.component("child",{ props: ["content"], template: `<div> <p>hello</p> <div v-html="this.content"></div> </div>` }) var vm = new Vue({ el: "#root" }) </script>
這樣子，顯示起來是沒問題的，但是dom 會在p 標籤外包裹一層div 標籤。
當子元件的一部分內容，是根據父元件傳遞過來的dom 進行顯示的時候，請使用插槽 slot。
<div id="root">
<child>
<p>say hi</p>
<h1>Hi</h1>
</child>
</div>
<script>
Vue.component("child",{
template: `<div>
<p>hello</p>
<slot></slot>
</div>`
})
var vm = new Vue({
el: "#root"
})
</script>如上。slot 還可以定義預設值：
<slot>預設內容</slot>
具名插槽（給插槽賦上名字）：
<div id="root">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
<script>
Vue.component("body-content",{
template: `<div>
<slot name="header">h</slot>
<div class="content">content</div>
<slot name="footer">f</slot>
</div>`
})
var vm = new Vue({
el: "#root"
})
</script>