VUEラーニング：24 - コンポーネント - ディレクトリ

部品アセンブリ

1. コンセプト成分
   ヴュー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
   小道具

   • 文字列の配列： 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 } } }
   • 小道具の命名規則
   • 動的プロップ（文字列を除いて、即ち、V-結合は結合、動的プロップ着信の他のタイプの使用を必要とします）
   • プロップウェイデータフローと.sync修飾子を結合双方向
   • 非小道具の特性
     • 交換またはマージされます
     • 無効に継承 inheritAttr: false
     • $attr
   イベント
   • v-on / $on イベントを監視します
   • $once 1回限りのイベント
   • $emit トリガ・イベント
   • $off アンインストールイベントリスナー
   • $listeners V-上の（ネイティブのリスナーイベントを除く）リスナーのコレクションを結合
   • .native ネイティブのイベント修飾子
   • .sync 双方向結合修飾
   • model プロパティ
   スロット
   • 通常のスロット
     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>
   • 解体スロット小道具
     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静的コンポーネントを作成します。