vue-learning：24 - component - 目錄

component 組件

1. 組件的概念
   Vue 組件同時也都是 Vue 實例，可接受相同的選項對象option (除了一些根級特有的選項) 和使用相同的生命週期鉤子，以及模板調用方式。
2. 組件的構建和註冊
   • 構建：com = Vue.extend(option)
   • 註冊：
     • 全局註冊：Vue.component('my-com', com)
     • 局部註冊：vm.components: {'my-com': com}
   • 語法糖： Vue.component('my-com',option) vm.components('my-com': option)
   • 組件命名規範

3. 組件三大API： prop / event / slot
   prop

   • 字符串數組形式： props: ['prop1', 'prop2', ...]
   • 對象形式：
     js props: {prop1: Number} props: { prop1: { type: [Number, String], required: true, default: 100, //當默認值是對象或數組時，必須從函數返回值獲取 () => { return value } validator: (value) => { // do somethings return Boolean return result } } }
   • prop的命名規範
   • 動態prop（除字符串外，其它類型傳入都須要使用動態prop，即v-bind綁定）
   • 單向數據流和prop實現雙向綁定.sync修飾符
   • 非prop特性
     • 被替換或合併
     • 禁用繼承 inheritAttr: false
     • $attr
   event
   • v-on / $on 監聽事件
   • $once 一次性事件
   • $emit 觸發事件
   • $off 卸載事件監聽
   • $listeners v-on綁定監聽器集合（除原生監聽事件）
   • .native 原生事件修飾符
   • .sync 雙向綁定修飾符
   • model 屬性
   slot
   • 普通插槽
     html <slot></slot>
   • 插槽提供默認值
     html <slot>default content</slot>
   • 具名插槽
     html <slot name="someName"></slot> <!-- 組件調用 --> <my-com> <template v-slot:somName></template> <my-com>
   • 做用域插槽
     html <slot :prop="value"></slot> <!--組件調用 --> <my-com> <template v-slot='childValue'>{{ cilidValue.value}}</template> </my-com>
   • 獨佔默認插槽的寫法
     html <some-component v-slot="childValue"> {{ childValue.value }}</some-component> <some-component v-slot:default="childValue"> {{ childValue.value }}</some-component>
   • 解構插槽prop
     html <my-com v-slot="{value}">{{ value }}</my-com> <!-- 重命名 --> <my-com v-slot="{value: otherName}">{{ otherName }}</my-com> <!-- 重命名並提供默認值 --> <my-com v-slot="{value: {otherName: defaultValue}}">{{ otherName }}</my-com>
   • 動態插槽名
     html <my-com> <template v-slot:[dynamicSlotName]></template> </my-com>
   • v-slot 的簡寫 #
html <my-com> <template #somName></template> <my-com>
   • 模板編譯做用域
     父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯的。
4. 組件依賴注入
   • provide
   • inject
5. 組件實例的引用
   • ref / $refs
   • $root
   • $parent
   • $children
   • 自定義擴展方法
6. 組件間的通訊
   • 父子組件通訊 prop / $emit
   • 嵌套組件 $attrs / $liteners
   • 後代組件通訊 provide / inject
   • 組件實例引用 $root / $parent / $children / $refs
   • 事件總線 const Bus = new Vue()
   • 狀態管理器 Vuex
7. 動態組件<component is="com-name"></component>
8. 異步組件function

9. 內置組件transiton / keep-alive / component

10. 其它
    • 組件的遞歸調用
    • 組件的循環引用
    • v-once建立靜態組件