動態(tài)組件和插槽

組件進(jìn)階-props校驗

props校驗

普通格式：props: ["propA", "propB"]。沒有類型檢查

高階格式：

props:?{
????//?基礎(chǔ)的類型檢查?(`null`?和?`undefined`?會通過任何類型驗證)
????propA:?Number,
????//?多個可能的類型
????propB:?[String,?Number],
????//?必填的字符串
????propC:?{
??????type:?String,
??????required:?true
????},
????//?帶有默認(rèn)值的數(shù)字
????propD:?{
??????type:?Number,
??????default:?100
????},
????//?帶有默認(rèn)值的對象
????propE:?{
??????type:?Object,
??????//?對象或數(shù)組默認(rèn)值必須從一個工廠函數(shù)獲取
??????default:?function?()?{
????????return?{?message:?'hello'?}
??????}
????},
????//?自定義驗證函數(shù)
????propF:?{
??????validator:?function?(value)?{
????????//?這個值必須匹配下列字符串中的一個
????????return?['success',?'warning',?'danger'].indexOf(value)?!==?-1
??????}
????}
??}
復(fù)制代碼

組件進(jìn)階 - 動態(tài)組件

目標(biāo)效果

需求: 完成一個注冊功能頁面, 2個按鈕切換, 額外封裝兩個組件：一個填寫注冊信息, 一個填寫用戶簡介信息

目標(biāo): 多個組件使用同一個掛載點，并可以動態(tài)切換，這就是動態(tài)組件

目錄結(jié)構(gòu)

根組件
├──?App.vue
└──?components
????├──?UserName.vue?#?用戶名和密碼輸入框
????└──?UserInfo.vue?#?人生格言和自我介紹框
復(fù)制代碼

格式

操作

UserName.vue

復(fù)制代碼

在父組件App.vue中使用

復(fù)制代碼

注意

• is只能是動態(tài)屬性=》:is="組件注冊后的標(biāo)簽名字符串或data變量"
• 不能直接拿注冊標(biāo)簽名賦值使用

小結(jié)

vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標(biāo)簽名字

組件進(jìn)階-keep-alive組件

目標(biāo)

掌握組件緩存的使用

背景

組件切換會導(dǎo)致組件被頻繁銷毀和重新創(chuàng)建, 大多數(shù)情況下是有自己的意義的，但也可能會導(dǎo)致不必要的性能損耗

演示1: 可以先給UserName.vue和UserInfo.vue 注冊created和destroyed生命周期事件, 觀察創(chuàng)建和銷毀過程

keep-alive

使用Vue內(nèi)置的keep-alive組件, 可以讓包裹的組件保存在內(nèi)存中不被銷毀

格式

演示2: 使用keep-alive內(nèi)置的vue組件, 讓動態(tài)組件緩存而不是銷毀

補(bǔ)充生命周期:

• activated - 激活
• deactivated - 失去激活狀態(tài)

????
????"comName">

復(fù)制代碼

小結(jié)

keep-alive可以提高組件的性能, 內(nèi)部包裹的標(biāo)簽不會被銷毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法

組件進(jìn)階-keep-alive組件-指定緩存

目標(biāo)

掌握keep-alive的include屬性的用法

語法

1. `include="組件名1,組件名2..."`
   

2. `:include="['組件名1'， '組件名2']"`
   

"name1,name2">
????
????"comName">

復(fù)制代碼

注意：

1. 匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)

組件進(jìn)階 - 默認(rèn)插槽

目標(biāo)

掌握組件插槽的使用

理解

生活中的插槽

vue中的插槽

1. 組件通過插槽傳入自定義結(jié)構(gòu)
2. 用于實現(xiàn)組件的內(nèi)容分發(fā), 通過 slot 標(biāo)簽, 可以接收到寫在組件標(biāo)簽內(nèi)的內(nèi)容
3. vue提供組件插槽能力, 允許開發(fā)者在封裝組件時，把不確定的部分定義為插槽

格式

在定義組件時，在template中用slot來占個坑；

使用時，將組件之間的內(nèi)容來填坑；

示例

組件進(jìn)階-具名插槽

目標(biāo)

掌握具名插槽的使用

背景

當(dāng)一個組件內(nèi)有2處以上需要外部傳入標(biāo)簽的地方

格式

定義：

使用：

• 
  ????
  ??我是文字哦
  ????
  
  復(fù)制代碼
  

  寫法2：

  
  ????
  ????#one>
  ??
  
  ????????????
  寒雨連江夜入?yún)?
  
  ????????????
  平明送客楚山孤。
  
  ????????????
  洛陽親友如相問，
  
  ????????????
  一片冰心在玉壺。
  
  ????????
  
  ????
  ????#two>
  ??"../assets/mm.gif"?alt=""?/>
  ????
  
  復(fù)制代碼
  

  小結(jié)

  1. slot有可以設(shè)置多個
  2. 定義組件時：slot的name屬性起插槽名
  3. 使用組件時, template配合#插槽名傳入具體html標(biāo)簽或組件

  組件進(jìn)階-作用域插槽（難點）

  

  目標(biāo)

  掌握作用域插槽的用法

  目標(biāo): 子組件中的數(shù)據(jù), 在給插槽賦值時在父組件環(huán)境下使用=> 子傳父=》傳數(shù)據(jù)

  步驟

  • 創(chuàng)建子組件, 準(zhǔn)備slot, 在slot上綁定屬性和子組件值
  • 使用子組件, 傳入自定義標(biāo)簽, 用template和v-slot="自定義變量名"
  • 自定義變量名會自動綁定slot上所有屬性, 就可以使用子組件內(nèi)值, 并替換slot位置

  示例

  具名插槽, 給slot綁定屬性和值

  

  
  
  
  復(fù)制代碼
  

  2. 父組件
     

  
  ????
  ??