Vue slot的用法
之前看官方文件,由於自己理解的偏差,不知道slot是幹嘛的,看到小標題,使用Slot分發內容,就以為 是要往下派發內容。然後就沒有理解插槽的概念。其實說白了,使用slot就是先圈一塊地,將來可能種花種菜,也有可能在這塊地上建房子。然而slot可以以一當十,可以插入很多東西。不知明白否?
由於專案經驗有限,這篇我就先跟著官網的知識點走,當然會加入自己的部分專案程式碼。
關於slot是這樣說的,
除非子元件模板包含至少一個 <slot> 插口,否則父元件的內容將會被丟棄。當子元件模板只有一個沒有屬性的 slot 時,父元件整個內容片段將插入到 slot 所在的 DOM 位置,並替換掉 slot 標籤本身。
最初在 <slot> 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。
單個 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=" <script> Vue.component('child-component', { template: '\ <div>\ <slot>\ <p>如果父元件沒用插入內容,我將作為預設出現</p>\ </slot>\ </div>' }); var app = new Vue({ el: '#app' }) </script> </body></html>
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案影片進群免費領取。
子元件 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=" <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>
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案影片進群免費領取。
子元件內宣告瞭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>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31557424/viewspace-2285013/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- vue slot 用法Vue
- vue元件化中slot的用法Vue元件化
- Vue 中的 slotVue
- [Vue] slot詳解,slot、slot-scope和v-slotVue
- vue插槽slotVue
- VUE 插槽 slotVue
- [vue] 插槽 slotVue
- 深入理解vue中的slot與slot-scopeVue
- vue的內建元件slotVue元件
- 對Vue插槽slot的理解Vue
- Vue(14)slot插槽的使用Vue
- 細談 vue - slot 篇Vue
- Vue 作用域插槽slotVue
- vue函式元件,slot分發,只實現default slot的問題Vue函式元件
- 初識 Vue(19)---(Vue 中使用插槽(slot))Vue
- Vue 插槽(slot)使用(通俗易懂)Vue
- 8.Vue元件三---slot插槽Vue元件
- 12.在vue中插槽(slot)Vue
- 請你說說 Vue 中 slot 和 slot-scope 的原理(2.6.11 深度解析)Vue
- 原來vue的slot可以這麼玩轉Vue
- Vue 開發之插槽(slot)的理解和使用Vue
- vue2.6之後的 v-slot插槽Vue
- 【20】vue.js — slot佔位符Vue.js
- Vue2.0五——props和slotVue
- Vue作用域插槽 :slot-scope 例項Vue
- vue3使用slot-scope報錯Vue
- 【VUE】vue-router的基本用法Vue
- Vue.js 你需要知道的 v-slot (譯)Vue.js
- vue.js-使用slot插槽分發內容Vue.js
- vue之watch的用法Vue
- vue2版本中slot的基本使用詳解Vue
- Vue 元件用法Vue元件
- vue --ref用法Vue
- Vue元件之props,$emit與$on以及slot分發Vue元件MIT
- vue3_defineExpose的用法Vue
- 【譯】Vue 的小奇技(第四篇):Vue.js 2.6.0 中的新指令 v-slotVue.js
- Vue一個案例引發「內容分發slot」的最全總結Vue
- Vue.js——slot-插槽的基本使用——2020.12.7Vue.js