Vuejs-组件-<slot> 标签分发内容
生活随笔
收集整理的這篇文章主要介紹了
Vuejs-组件-<slot> 标签分发内容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
資料來自：https://cn.vuejs.org/v2/guide/components.html#具名-Slot
在官方文檔的基礎上，更加細致的講解代碼。
<slot> 標簽中的任何內容都被視為備用內容，只有在宿主元素為空，它才顯示。
1.單個slot
除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將丟棄。
<body >
<div id="app">
<h1>我是父組件的標題</h1>
<my-component>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
components:{
myComponent:{
template:'<div><h2>我是子組件的標題</h2><slot>只有在沒有要分發的內容時才會顯示。</slot></div>',
}
}
})
</script>
</body>
2.具名slot
slot 可以有不同的名字。具名 slot 將匹配內容片段中所對應 slot 特性。
將對應的父組件嵌套到 具名 slot 的子組件 位置 的元素展示出來。
<app-layout>
<h1 slot="header">這里可能是一個頁面標題</h1>
<p>主要內容的一個段落。</p>
<p>另一個主要段落。</p>
<p slot="footer">這里有一些聯系信息</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>',
}
}
})
總結
以上是生活随笔為你收集整理的Vuejs-组件-<slot> 标签分发内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.lang.Exception:
- 下一篇： 戚风蛋糕可以开裂么？