[vue] 插槽 slot
之前對插槽的理解並不深入,參考官網理解一下~
單個插槽
除非子元件模板包含至少一個 <slot> 插口,否則父元件的內容將會被丟棄。當子元件模板只有一個沒有屬性的插槽時,父元件傳入的整個內容片段將插入到插槽所在的 DOM 位置,並替換掉插槽標籤本身。
最初在 <slot> 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。
假定 my-component 元件有如下模板:
<div>
<h2>我是子元件的標題</h2>
<slot>
只有在沒有要分發的內容時才會顯示。
</slot>
</div>
父元件模板:
<div>
<h1>我是父元件的標題</h1>
<my-component>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
</div>
渲染結果:
<div>
<h1>我是父元件的標題</h1>
<div>
<h2>我是子元件的標題</h2>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</div>
</div>
具名插槽
場景:
設計組合使用的元件時,內容分發 API 是非常有用的機制
<slot>
元素可以用一個特殊的特性 name 來進一步配置如何分發內容。多個插槽可以有不同的名字。具名插槽將匹配內容片段中有對應 slot 特性的元素。
仍然可以有一個匿名插槽,它是預設插槽,作為找不到匹配的內容片段的備用插槽。如果沒有預設插槽,這些找不到匹配的內容片段將被拋棄。
例如,假定我們有一個 app-layout 元件,它的模板為:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父元件模板:
<app-layout>
<h1 slot="header">這裡可能是一個頁面標題</h1>
<p>主要內容的一個段落。</p>
<p>另一個主要段落。</p>
<p slot="footer">這裡有一些聯絡資訊</p>
</app-layout>
渲染結果為:
<div class="container">
<header>
<h1>這裡可能是一個頁面標題</h1>
</header>
<main>
<p>主要內容的一個段落。</p>
<p>另一個主要段落。</p>
</main>
<footer>
<p>這裡有一些聯絡資訊</p>
</footer>
</div>
作用域插槽
作用域插槽還不是特別理解。。。。。主要是沒想清楚他的應用場景。。。如果有比較理解的可以留言指點一下~ 下面是一個例子但是這種場景我也沒太理解這個list有何意義,通用性在哪裡?http://blog.csdn.net/oak160/article/details/65447195
2.1.0 新增
作用域插槽是一種特殊型別的插槽,用作一個 (能被傳遞資料的) 可重用模板,來代替已經渲染好的元素。
在子元件中,只需將資料傳遞到插槽,就像你將 prop 傳遞給元件一樣:
<div class="child">
<slot text="hello from child"></slot>
</div>
在父級中,具有特殊特性 slot-scope 的 <template> 元素必須存在,表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變數名,此變數接收從子元件傳遞過來的 prop 物件:
<div class="parent">
<child>
<template slot-scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
如果我們渲染上述模板,得到的輸出會是:
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>
在 2.5.0+,slot-scope 能被用在任意元素或元件中而不再侷限於 <template>
作用域插槽更典型的用例是在列表元件中,允許使用者自定義如何渲染列表的每一項:
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li
slot="item"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</my-awesome-list>
列表元件的模板:
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- 這裡寫入備用內容 -->
</slot>
</ul>
解構
slot-scope 的值實際上是一個可以出現在函式簽名引數位置的合法的 JavaScript 表示式。這意味著在受支援的環境 (單檔案元件或現代瀏覽器) 中,您還可以在表示式中使用 ES2015 解構:
<child>
<span slot-scope="{ text }">{{ text }}</span>
</child>
編寫可複用元件
在編寫元件時,最好考慮好以後是否要進行復用。一次性元件間有緊密的耦合沒關係,但是可複用元件應當定義一個清晰的公開介面,同時也不要對其使用的外層資料作出任何假設。
Vue 元件的 API 來自三部分——prop、事件和插槽:
- Prop 允許外部環境傳遞資料給元件;
- 事件允許從元件內觸發外部環境的副作用;
- 插槽允許外部環境將額外的內容組合在元件中。
使用 v-bind 和 v-on 的簡寫語法,模板的意圖會更清楚且簡潔:
<my-component
:foo="baz"
:bar="qux"
@event-a="doThis"
@event-b="doThat"
>
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>
話說小主開了一個微信公眾號:[
民間程式設計師
],分享H5相關知識點,H5踩坑記,H5實戰案例分享等,歡迎大家關注~
相關文章
- vue插槽slotVue
- VUE 插槽 slotVue
- Vue 作用域插槽slotVue
- 對Vue插槽slot的理解Vue
- Vue(14)slot插槽的使用Vue
- 12.在vue中插槽(slot)Vue
- Vue 插槽(slot)使用(通俗易懂)Vue
- 8.Vue元件三---slot插槽Vue元件
- 初識 Vue(19)---(Vue 中使用插槽(slot))Vue
- Vue作用域插槽 :slot-scope 例項Vue
- vue.js-使用slot插槽分發內容Vue.js
- Vue 開發之插槽(slot)的理解和使用Vue
- vue2.6之後的 v-slot插槽Vue
- Vue.js——slot-插槽的基本使用——2020.12.7Vue.js
- react 實現插槽slot功能React
- mapboxgl V3 Slot插槽使用介紹
- 032.Vue3入門,插槽Slot的作用域和預設內容Vue
- 「Vue原始碼學習」你真的知道插槽Slot是怎麼“插”的嗎Vue原始碼
- [Vue] slot詳解,slot、slot-scope和v-slotVue
- 033.Vue3入門,多個插槽Slot的命名呼叫和#號簡寫Vue
- Vue插槽與作用域插槽Vue
- vue slot 用法Vue
- vue。js插槽VueJS
- 035.Vue3入門,使用具名插槽Slot中,同時顯示主頁面和多個插槽頁面內容Vue
- Vue slot的用法Vue
- Vue 中的 slotVue
- Vue中使用插槽Vue
- 細談 vue - slot 篇Vue
- Vue 插槽之插槽內容學習總結Vue
- 深入理解vue中的slot與slot-scopeVue
- 06 Vue3插槽Vue
- vue基礎-元件&插槽Vue元件
- vue的內建元件slotVue元件
- vue 元件中solt 插槽使用Vue元件
- Vue 插槽 廢棄語法Vue
- Vue元件深入理解--插槽Vue元件
- vue中的插槽詳解Vue
- 詳解Vue中的插槽Vue
- vue元件化中slot的用法Vue元件化