伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

Vue--》動態(tài)組件和插槽的使用講解

2023-1-6    前端達(dá)人

目錄

動態(tài)組件

keep-alive使用

keep-alive的include和exclude屬性

插槽


動態(tài)組件

動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏,vue提供了一個內(nèi)置的<component>組件,專門用來實現(xiàn)動態(tài)組件的渲染。什么意思呢?接著往下看:

那么內(nèi)置的<component>組件是什么情況呢?component 是可以作為標(biāo)簽使用的,其作用組件的占位符。當(dāng)然其作為標(biāo)簽直接使用是會報錯的,還需要搭配屬性值 is ,其表示要渲染的組件的名字。如下:

那么如何去動態(tài)的切換組件呢?寫一個簡單的button按鈕實現(xiàn)即可,如下:

keep-alive使用

當(dāng)我們動態(tài)的去創(chuàng)建組件時,這一點和 v-if 很相似,改變組件會直接將改變之前的組件的數(shù)據(jù)銷毀掉。如下:

我們給Left組件設(shè)置 +1 按鈕,來表示其數(shù)據(jù):

用生命周期函數(shù)來監(jiān)聽組件的創(chuàng)建和銷毀:

那我們?nèi)绾卧趧討B(tài)創(chuàng)建組件的同時還能暴露組件之前的數(shù)據(jù)呢?這里就需要借助keep-alive。

keep-alive對應(yīng)的生命周期函數(shù)

當(dāng)組件被緩存時,會自動觸發(fā)組件的deactivated生命周期函數(shù)。

當(dāng)組件被激活時,會自動觸發(fā)組件的activated生命周期函數(shù)。

 
        
  1. created(){
  2. console.log('Left組件被"創(chuàng)建"了');
  3. },
  4. destroyed(){
  5. console.log('Left組件被"銷毀"了');
  6. },
  7. // 當(dāng)組件第一次被創(chuàng)建的時候,既會創(chuàng)建created生命周期,也會執(zhí)行activated生命周期
  8. // 當(dāng)組件被激活時,只會觸發(fā)activated生命周期,不再觸發(fā)created。因為組件沒有被重新創(chuàng)建
  9. activated(){
  10. console.log('組件被激活了,activated');
  11. },
  12. deactivated() {
  13. console.log('組件被緩存了,deactivated');
  14. },

keep-alive的include和exclude屬性

include屬性用來指定:只有名稱匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔:

exclude屬性用來指定:只有名稱匹配的組件“不“會被緩存。多個組件名之間使用英文的逗號分隔:

插槽

插槽Slot)是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時,把不確定的、希望由用戶指定的部分定義為插槽。其操作如下:

vue官方規(guī)定:每一個slot插槽,都要有一個name名稱,如果省略了slot的name屬性,則有一個默認(rèn)名稱叫做 default ,默認(rèn)情況下,在使用組件的時候,提供的內(nèi)容都會被填充到名字為default的插槽之中。

如果要把內(nèi)容填充到指定名稱的插槽中,需要使用 v-slot:這個指令,v-slot:后面要跟上插槽的名字,注意:v-slot:指令不能直接用在元素身上,必須用在template標(biāo)簽上。當(dāng)然這個指令也是有簡寫形式:# 即可。template:這個標(biāo)簽是一個虛擬標(biāo)簽,只其到包裹性質(zhì)的作用,不會被渲染為任何實質(zhì)性的 html 元素。

后備內(nèi)容:封裝組件時,可以為預(yù)留的<slot>插槽提供后備內(nèi)容(默認(rèn)內(nèi)容)。如果組件的使用者沒有為插槽提供任何內(nèi)容,則后備內(nèi)容會生效。

作用域插槽:在封裝組件時,為預(yù)留的<slot>提供屬性對應(yīng)的值。如下:

當(dāng)然上面的作用域插槽數(shù)據(jù)明顯是寫死了,那么可以將數(shù)據(jù)動態(tài)存儲在data里面嗎?答案是可以的

文章知識點與官方知識檔案匹配,可進一步學(xué)習(xí)相關(guān)知識





  來源:csdn



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計cqzjtgb.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

日歷

鏈接

個人資料

存檔

前郭尔| 昆明市| 叶城县| 民勤县| 达拉特旗| 商南县| 新巴尔虎左旗| 旌德县| 兴仁县| 大姚县| 凤翔县| 阿克苏市| 珲春市| 鸡西市| 绥棱县| 南汇区| 灌云县| 延寿县| 潍坊市| 辽阳市| 乌兰浩特市| 库尔勒市| 镇雄县| 沙坪坝区| 长葛市| 犍为县| 乐陵市| 南通市| 长阳| 东光县| 保靖县| 屏边| 凭祥市| 巢湖市| 石棉县| 桦川县| 陕西省| 汤原县| 潞城市| 桂东县| 台南市|