Java併發容器之DelayQueue原始碼分析
阿新 • • 發佈:2022-05-08
什麼是插槽
插槽就是子元件中的提供給父元件使用的一個佔位符,用<slot></slot> 表示,父元件可以在這個佔位符中填充任何模板程式碼,如 HTML、元件等,填充的內容會替換子元件的<slot></slot>標籤。
1、在子元件中放一個佔位符
1 <template> 2 <div> 3 <h1>午飯吃什麼?</h1> 4 <slot></slot> 5 </div> 6 </template> 7<script> 8 export default { 9 name: 'child' 10 } 11 </script>
2、在父元件中給這個佔位符填充內容
1 <template> 2 <div> 3 <div>使用slot分發內容</div> 4 <div> 5 <child> 6 <div style="margin-top: 30px">午飯吃烤肉、炸雞、漢堡、螺螄粉</div> 7</child> 8 </div> 9 </div> 10 </template> 11 <script> 12 import child from "./child.vue"; 13 export default { 14 name: 'father', 15 components:{ 16 child 17 } 18 } 19 </script>
效果圖:
如果子元件沒有使用插槽,父元件如果需要往子元件中填充模板或者html, 是沒法做到的
插槽使用 - 具名插槽
描述:具名插槽其實就是給插槽取個名字。一個子元件可以放多個插槽,而且可以放在不同的地方,而父元件填充內容時,可以根據這個名字把內容填充到對應插槽中。
1、子元件的程式碼,設定了兩個插槽(header和footer):
1 <template> 2 <div> 3 <div class="header"> 4 <h1>我是頁頭標題</h1> 5 <div> 6 <slot name="header"></slot> 7 </div> 8 </div> 9 <div class="footer"> 10 <h1>我是頁尾標題</h1> 11 <div> 12 <slot name="footer"></slot> 13 </div> 14 </div> 15 </div> 16 </template> 17 18 <script> 19 export default { 20 name: "son" 21 } 22 </script> 23 24 <style scoped> 25 26 </style>
2、父元件填充內容, 父元件通過 v-slot:[name] 的方式指定到對應的插槽中
1 <template> 2 <div> 3 <div>slot內容分發</div> 4 <Son> 5 <template slot="header"> 6 <p>我是頁頭的具體內容</p> 7 </template> 8 <template slot="footer"> 9 <p>我是頁尾的具體內容</p> 10 </template> 11 </Son> 12 </div> 13 </template> 14 15 <script> 16 import Son from "./components/Son.vue"; 17 18 export default { 19 name: "father1", 20 components: { 21 Son, 22 } 23 } 24 </script> 25 26 <style scoped> 27 28 </style>
最終效果: