Vuejs-组件-<slot> 标签分发内容
生活随笔
收集整理的這篇文章主要介紹了
Vuejs-组件-<slot> 标签分发内容
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
資料來(lái)自：https://cn.vuejs.org/v2/guide/components.html#具名-Slot
在官方文檔的基礎(chǔ)上，更加細(xì)致的講解代碼。
<slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容，只有在宿主元素為空，它才顯示。
1.單個(gè)slot
除非子組件模板包含至少一個(gè) <slot> 插口，否則父組件的內(nèi)容將丟棄。
<body >
<div id="app">
<h1>我是父組件的標(biāo)題</h1>
<my-component>
<p>這是一些初始內(nèi)容</p>
<p>這是更多的初始內(nèi)容</p>
</my-component>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
components:{
myComponent:{
template:'<div><h2>我是子組件的標(biāo)題</h2><slot>只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。</slot></div>',
}
}
})
</script>
</body>
2.具名slot
slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中所對(duì)應(yīng) slot 特性。
將對(duì)應(yīng)的父組件嵌套到 具名 slot 的子組件 位置 的元素展示出來(lái)。
<app-layout>
<h1 slot="header">這里可能是一個(gè)頁(yè)面標(biāo)題</h1>
<p>主要內(nèi)容的一個(gè)段落。</p>
<p>另一個(gè)主要段落。</p>
<p slot="footer">這里有一些聯(lián)系信息</p>
</app-layout>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#container',
components:{
appLayout:{
template:'<div class="container">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>',
}
}
})
總結(jié)
以上是生活随笔為你收集整理的Vuejs-组件-<slot> 标签分发内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java.lang.Exception:
- 下一篇： 高强度学习训练第十六天总结: Sprin