本文主要介紹vue中slot與slot-scope的具體使用,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
寫在前面
vue中關於插槽的文檔說明很短,語言又寫的很凝練,再加上其和methods,data,computed等常用選項使用頻率、使用先後上的差別,這就有可能造成初次接觸插槽的開發者容易產生“算了吧,回頭再學,反正已經可以寫基礎組件了”,於是就關閉了vue說明文檔。
實際上,插槽的概念很簡單,以下透過分成三個部分來講。這個部分也是按照vue說明文檔的順序來寫的。
進入三個部分之前,先讓還沒接觸過插槽的同學對什麼是插槽有一個簡單的概念:插槽,也就是slot,是組件的一塊HTML模板,這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上,一個slot最核心的兩個問題這裡就點出來了,是顯示不顯示和怎樣顯示。
由於插槽是一塊模板,所以,對於任何一個組件,從模板種類的角度來分,其實都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板,指的是'p、span、ul、table'這些,非插槽模板的顯示與隱藏以及如何顯示由插件自身控制;插槽模板是slot,它是一個空殼子,因為它顯示與隱藏以及最後用什麼樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件本身決定,slot寫在組件template的哪塊,父組件傳過來的模板將來就顯示在哪塊。
單一插槽| 預設插槽| 匿名插槽
首先是單一插槽,單一插槽是vue的官方叫法,但其實也可以叫它預設插槽,或是與具名插槽相對,我們可以叫它匿名插槽。因為它不用設定name屬性。
單一插槽可以放置在元件的任意位置,但是就像它的名字一樣,一個元件中只能有一個該類別插槽。相對應的,具名插槽就可以有很多個,只要名字(name屬性)不同就可以了。
下面透過一個例子來展示。
父元件:
<template> <p class="father"> <h3 id="这里是父组件">这里是父组件</h3> <child> <p class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span>菜单5</span> <span>菜单6</span> </p> </child> </p> </template>
子元件:
<template> <p class="child"> <h3 id="这里是子组件">这里是子组件</h3> <slot></slot> </p> </template>
在這個範例裡,因為父元件在
<p class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span>菜单5</span> <span>菜单6</span> </p>
最終的渲染結果如圖所示:
#註:所有demo都加了樣式,以便觀察。其中,父組件以灰色背景填充,子組件都以淺藍色填充。
具名插槽
匿名插槽沒有name屬性,所以是匿名插槽,那麼,插槽加了name屬性,就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。下面的例子,就是一個有兩個具名插槽和單一插槽的元件,這三個插槽被父元件用同一套css樣式顯示了出來,不同的是內容上略有區別。
父元件:
<template> <p class="father"> <h3 id="这里是父组件">这里是父组件</h3> <child> <p class="tmpl" slot="up"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span>菜单5</span> <span>菜单6</span> </p> <p class="tmpl" slot="down"> <span>菜单-1</span> <span>菜单-2</span> <span>菜单-3</span> <span>菜单-4</span> <span>菜单-5</span> <span>菜单-6</span> </p> <p class="tmpl"> <span>菜单->1</span> <span>菜单->2</span> <span>菜单->3</span> <span>菜单->4</span> <span>菜单->5</span> <span>菜单->6</span> </p> </child> </p> </template>
子元件:
<template> <p class="child"> // 具名插槽 <slot name="up"></slot> <h3 id="这里是子组件">这里是子组件</h3> // 具名插槽 <slot name="down"></slot> // 匿名插槽 <slot></slot> </p> </template>
顯示結果如圖:
可以看到,父元件透過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板預設關聯匿名插槽。
作用域插槽 | 有資料的插槽
最後,就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽,實際上,比較前面兩種插槽,我們可以叫它帶資料的插槽。什麼意思呢,就是前面兩種,都是在元件的template裡面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求,在slot上面綁定資料。也就是你得寫成大概下面這個樣子。
<slot name="up" :data="data"></slot> export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } }, }
我們前面說了,插槽最後顯示不顯示是看父元件有沒有在child下面寫模板,像下面那樣。
<child> html模板 </child>
寫了,插槽就總得在瀏覽器上顯示點東西,東西就是html該有的模樣,沒寫,插槽就是空殼子,啥都沒有。
OK,我們說有html模板的情況,就是父元件會往子元件插模板的情況,那到底插一套什麼樣的樣式呢,這由父元件的html+css共同決定,但是這套樣式裡面的內容呢?
正因為作用域插槽綁定了一套數據,父元件可以拿來用。於是,情況就變成了這樣:樣式父元件說了算,但內容可以顯示子元件插槽綁定的。
我们再来对比,作用域插槽和单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件是提供的模板要既包括样式由包括内容的,上面的例子中,你看到的文字,“菜单1”,“菜单2”都是父组件自己提供的内容;而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。
下面的例子,你就能看到,父组件提供了三种样式(分别是flex、ul、直接显示),都没有提供数据,数据使用的都是子组件插槽自己绑定的那个人名数组。
父组件:
<template> <p class="father"> <h3 id="这里是父组件">这里是父组件</h3> <!--第一次使用:用flex展示数据--> <child> <template slot-scope="user"> <p class="tmpl"> <span v-for="item in user.data">{{item}}</span> </p> </template> </child> <!--第二次使用:用列表展示数据--> <child> <template slot-scope="user"> <ul> <li v-for="item in user.data">{{item}}</li> </ul> </template> </child> <!--第三次使用:直接显示数据--> <child> <template slot-scope="user"> {{user.data}} </template> </child> <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽--> <child> 我就是模板 </child> </p> </template>
子组件:
<template> <p class="child"> <h3 id="这里是子组件">这里是子组件</h3> // 作用域插槽 <slot :data="data"></slot> </p> </template> export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } } }
结果如图所示:
相关推荐:
js组件SlotMachine实现图片切换效果制作抽奖系统_javascript技巧
以上是vue中slot與slot-scope的具體使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

在Tampermonkey中如何對多個鏈接進行並發GET請求並依次判斷返回結果?在Tampermonkey腳本中,我們經常需要對多個鏈...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載
最受歡迎的的開源編輯器

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

記事本++7.3.1
好用且免費的程式碼編輯器