Vueスロットの実装原理についての簡単な説明

<!-- サブコンポーネント comA -->
<テンプレート>
  <div class='デモ'>
    <スロット><スロット>
    <スロット名='テスト'></スロット>
    <スロット名='scopedSlots' テスト='デモ'></スロット>
  </div>
</テンプレート>
<!-- 親コンポーネント -->
<comA>
  <span>これがデフォルトのスロットです</span>
  <template slot='test'>これは名前付きスロットです</template>
  <template slot='scopedSlots' slot-scope='scope'>これはスコープ付きスロットです (旧バージョン) {{scope.test}}</template>
  <template v-slot:scopedSlots='scopeProps' slot-scope='scope'>これはスコープ付きスロットです (新バージョン) {{scopeProps.test}}</template>
</comA>

<div id='アプリ'>
  <テスト>
    <テンプレートスロット="hello">
      123
    </テンプレート>
  </テスト>
</div>
<スクリプト>
  新しいVue({
    el: '#app',
    コンポーネント:
      テスト： {
        テンプレート: '<h1>' +
          '<スロット名="hello"></スロット>' +
          '</h1>'
      }
    }
  })
</スクリプト>

{
  タグ: 'テスト',
  scopedSlots: { // スコープスロット // slotName: ASTNode,
    // ...
  }
  子供たち： [
    {
      タグ: 'テンプレート',
      // ...
      親: parentASTNode、
      children: [ childASTNode ], // スロットコンテンツの子ノード、つまりテキストノード 123
      slotScope: undefined、// スコープ スロット バインディング値 slotTarget: "\"hello\"", // 名前付きスロット名 slotTargetDynamic: false // 動的にバインドされたスロットかどうか // ...
    }
  ]
}

(これ){
  _c('div',{attrs:{"id":"app"}}, を返します。
  [_c('テスト',
    [
      _c('テンプレート',{スロット:"hello"},[_v("\n 123\n ")])],2)
    ]、
  1)
}

{
  タグ: 'div',
  親: 未定義、
  data: { // VNode 構成項目を保存 attrs: { id: '#app' }
  },
  context: componentContext, // コンポーネントスコープ elm: undefined, // 実際のDOM要素 children: [
    {
      タグ: 'vue-component-1-test',
      children: undefined, // コンポーネントはページの最小単位であり、スロットコンテンツは子コンポーネントで解析されます parent: undefined,
      componentOptions: { // コンポーネント構成項目 Ctor: VueComponentCtor, // コンポーネント構築方法 data: {
          フック: {
            init: fn, //メソッド呼び出しコンポーネントをインスタンス化します insert: fn,
            プレパッチ: fn、
            破壊する: fn
          },
          scopedSlots: { //スコープスロット構成項目。スコープスロットVNodeを生成するために使用される
            スロット名: slotFn
          }
        },
        children: [ // コンポーネントスロットノードタグ: 'template',
          propsData: undefined, // propsパラメータ listeners: undefined,
          データ： {
            スロット: 'hello'
          },
          子: [ VNode ],
          親: 未定義、
          context: componentContext // 親コンポーネントのスコープ // ...
        ] 
      }
    }
  ]、
  // ...
}

{
  タグ: 'h1',
  親: 未定義、
  子供たち： [
    {
      タグ: 'スロット',
      スロット名: "\"hello\"",
      // ...
    }
  ]、
  // ...
}

// レンダリングメソッド with(this){
  _c('h1',[ _t("hello") ], 2) を返します
}

// ソースコードパス: vue-dev\src\core\instance\render-helpers\render-slot.js
エクスポート関数renderSlot（
  名前: 文字列、
  フォールバック: ?Array<VNode>,
  小道具: ?オブジェクト、
  バインドオブジェクト: ?オブジェクト
): ?配列<VNode> {
  const scopedSlotFn = this.$scopedSlots[名前]
  ノードを
  if (scopedSlotFn) { // スコープ付きスロット
    小道具 = 小道具 || {}
    if (bindObject) {
      process.env.NODE_ENV !== 'production' && !isObject(bindObject) の場合 {
        警告(
          '引数なしのスロット v-bind はオブジェクトを期待します'、
          これ
        ）
      }
      props = extend(extend({}, bindObject), props)
    }
    //スコープ スロット、スロット VNode を取得
    ノード = scopedSlotFn(props) || フォールバック
  } それ以外 {
    // スロットの通常スロット VNode を取得します
    nodes = this.$slots[name] || フォールバック
  }

  const ターゲット = props && props.slot
  if (ターゲット) {
    this.$createElement('template', { slot: target }, nodes) を返します。
  } それ以外 {
    ノードを返す
  }
}

<!-- デモ -->
<div id='アプリ'>
  <テスト>
      <テンプレート スロット="hello" スロット スコープ='スコープ'>
        {{scope.hello}}
      </テンプレート>
  </テスト>
</div>
<スクリプト>
    var vm = 新しい Vue({
        el: '#app',
        コンポーネント:
            テスト： {
                データ （） {
                    戻る {
                        こんにちは: '123'
                    }
                },
                テンプレート: '<h1>' +
                    '<スロット名="hello" :hello="hello"></スロット>' +
                  '</h1>'
            }
        }
    })

</スクリプト>

（これ）{
        _c('div', { を返す
            属性: {
                「id」: 「アプリ」
            }
        }, [_c('テスト', {
            スコープスロット: _u([{
                キー: "hello",
                fn: 関数(スコープ) {
                    [_v("\n " + _s(scope.hello) + "\n ")] を返します
                }
            }])
        })], 1)
    }

<div id='アプリ'>
<!-- <テスト>-->
<!-- <テンプレートスロット="hello">-->
<!-- 123-->
<!-- </テンプレート>-->
<!-- </テスト>-->
</div>
<スクリプト>
  新しいVue({
    // el: '#app',
    レンダリング (要素を作成) {
      createElement('test', [ を返します。
        要素を作成します('h3', {
          スロット: 'hello',
          domProps: {
            内部テキスト: '123'
          }
        })
      ])
    },
    コンポーネント:
      テスト： {
        レンダリング(要素を作成) {
          createElement('h1', [ this.$slots.hello ] を返します。)
        }
        // テンプレート: '<h1>' +
        // '<スロット名="hello"></スロット>' +
        // '</h1>'
      }
    }
  }).$mount('#app')
</スクリプト>

<div id='アプリ'>
<!-- <テスト>-->
<!-- <span slot="hello" slot-scope='scope'>-->
<!-- {{scope.hello}}-->
<!-- </span>-->
<!-- </テスト>-->
</div>
<スクリプト>
  新しいVue({
    // el: '#app',
    レンダリング (要素を作成) {
      createElement('test', を返す。
        スコープスロット:{
          hello: scope => { // 親コンポーネントのレンダリングメソッドでは、最終的に変換されたスコープスロットメソッドはこの記述方法と一致しています return createElement('span', {
              domProps: {
                内部テキスト: scope.hello
              }
            })
          }
        }
      })
    },
    コンポーネント:
      テスト： {
        データ （） {
          戻る {
            こんにちは: '123'
          }
        },
        レンダリング (要素を作成) {
          // スコープスロットの親コンポーネントは関数を渡します。この関数は手動で呼び出す必要があり、VNode を生成します。
          slotVnode = this.$scopedSlots.hello({ hello: this.hello }) とします。
          createElement('h1', [ slotVnode ]) を返します
        }
        // テンプレート: '<h1>' +
        // '<スロット名="hello" :hello="hello"></スロット>' +
        // '</h1>'
      }
    }
  }).$mount('#app')

</スクリプト>