文章目錄
- 一.is解決模闆标簽bug問題加載出錯問題
- 問題還原：
- 解決方式:
- 二.ref屬性怎麼用?
- 三.父子元件傳值
- 1.父元件向子元件傳值，子元件能否修改父元件屬性?
- 2.子元件如何向父元件傳值
- 四、元件參數校驗
- 單個類型
- 數組形式
- 對象形式:
- 五、元件props屬性和非props屬性的兩大差別?
- 六、如何給父元件綁定原生事件
- 麻煩的寫法: 子元件觸發
- 簡單寫法: 事件修飾符
- 七、非父子元件如何傳值
- 八、vue中如何使用插槽?
- 什麼情況下使用插槽?
- 解決方式:插槽
- slot：如何定義預設值
- 怎麼插入多個插槽
- 作用域插槽怎麼用?
- 九、動态元件怎麼用?
- 不使用動态元件的寫法
- 使用動态元件
- 提高元件渲染性能: v-once
一.is解決模闆标簽bug問題加載出錯問題
問題還原：
- 代碼:
檢視效果:
解決方式:
- 其他标簽同理
- is讓每個元件都有一個獨立的空間存儲。
二.ref屬性怎麼用?
ref有2層含義:
- ref寫在div标簽上的時候，通過this.$ref.名字擷取到的是
該标簽對應的元素
- ref寫在元件上的時候，通過this.$ref.名字擷取到的是
子元件
執行個體如下:
三.父子元件傳值
1.父元件向子元件傳值，子元件能否修改父元件屬性?
回答：不能，解決方式是，子元件需要克隆一份副本，子元件去操作自己的屬性（副本）。
示例如下:
2.子元件如何向父元件傳值
新版的vue隻能通過事件觸發傳值。$emit，隐性知識，單向資料流，父類可以向子元件傳遞任何值，但子元件不能修改父類的值，隻能通過事件觸發。
示例如下:
四、元件參數校驗
單個類型
數組形式
對象形式:
常使用者屬性： type, require, default， validator校驗器
五、元件props屬性和非props屬性的兩大差別?
答:
-
1.props屬性，子元件可以直接使用父元件傳過來的props屬性變量；
props屬性如果直接使用父元件傳來的屬性變量則會報錯
- 2.非props屬性，在html上屬性不會顯示出來，非props屬性則會顯示出來。
示例如下:
非props屬性用的不是很多!!
六、如何給父元件綁定原生事件
事件分兩種:
一種是 元件的事件，
一種是div或其他标簽上的事件，也稱為原生事件。
是以，想觸發父元件的原生事件有2種：
麻煩的寫法: 子元件觸發
比較麻煩，需要2層傳遞。
簡單寫法: 事件修飾符
七、非父子元件如何傳值
2種方式:
1.vuex
項目中再示範。
2.釋出訂閱者模/總線Bus
總線的方式示例:
八、vue中如何使用插槽?
什麼情況下使用插槽?
如果父元件想給子元件傳遞一段html代碼，子元件想顯示的話，必須防止标簽轉義。
示例如下:
解決方式:插槽
補充，上面的框，即使不指定，slot的話也不會出錯。
slot：如何定義預設值
怎麼插入多個插槽
可以具名插槽。
作用域插槽怎麼用?
-
一般使用場景:
如果子元件有個循環，但是循環顯示的内容由父元件控制顯示那個屬性，則可以使用作用域插槽;或者子元件某一部分的dom元素希望父元件傳遞過來的時候使用。
- 顯示的内容，想通過父類控制，怎麼改寫?
九、動态元件怎麼用?
做個切換元件的例子:
不使用動态元件的寫法
使用動态元件
提高元件渲染性能: v-once
動态元件切換的時候會銷毀目前的元件，再建立新的元件，如果每一次元件顯示的内容一緻，則，可以使用v-once，将上次的元件放在記憶體中，切換的時候直接從記憶體中去即可。
開通了個微信公衆号：
搜尋： 怒放de每一天
後續可能不定時推送相關文章，期待和大家一起成長！！