Vue の高度な使用方法チュートリアル 動的コンポーネント

// ビュー
<div id="アプリ">
  <button @click="changeTabs('child1')">子1</button>
  <button @click="changeTabs('child2')">子2</button>
  <button @click="changeTabs('child3')">子3</button>
  <コンポーネント :is="タブを選択">
  </コンポーネント>
</div>

// js
var 子1 = {
  テンプレート: '<div>content1</div>',
}
var 子2 = {
  テンプレート: '<div>content2</div>'
}
var 子3 = {
  テンプレート: '<div>content3</div>'
}
var vm = 新しい Vue({
  el: '#app',
  コンポーネント:
    子供1、
    子供2、
    子供3
  },
  メソッド: {
    タブを変更する
      this.chooseTabs = タブ;
    }
  }
})

// 動的コンポーネントの分析 function processComponent (el) {
  var バインディング;
  // is属性に対応する値を取得します if ((binding = getBindingAttr(el, 'is'))) {
    // ast ツリーには追加のコンポーネント属性があります el.component = binding;
  }
  getAndRemoveAttr(el, 'インラインテンプレート') != null の場合 {
    el.inlineTemplate = true;
  }
}

//レンダリング関数生成関数 var code = generate(ast, options);

// 生成関数の実装 function generate (ast,options) {
  var state = new CodegenState(オプション);
  var code = ast ? genElement(ast, state): '_c("div")';
  戻る {
    レンダリング: ("with(this){return " + code + "}"),
    静的レンダリング関数: state.staticRenderFns
  }
}

関数genElement(el, state) {
  ···
  var コード;
  // 動的コンポーネントブランチ if (el.component) {
    コード = genComponent(el.component, el, 状態);
  }
}

// 動的コンポーネントの処理関数 genComponent (
    コンポーネント名、
    エル、
    州
  ）{
    // inlineTemplate属性が設定されている場合、childrenはnullになります
    var children = el.inlineTemplate ? null : genChildren(el, state, true);
    
    戻り値: ("_c(" + コンポーネント名 + "," + (genData$2(el, 状態)) + 
    (子供 ? ("," + 子供) : '') + ")")
  }

"with(this){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"

"with(this){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}"

const AsyncComponent = () => ({

  // ロードするコンポーネント（`Promise` オブジェクトである必要があります）

  コンポーネント: import('./MyComponent.vue'),

  //非同期コンポーネント読み込み時に使用されるコンポーネント読み込み: LoadingComponent、

  // 読み込み失敗時に使用されるコンポーネント error: ErrorComponent,

  // ロード中のコンポーネントの遅延時間を表示します。デフォルト値は200（ミリ秒）です

  遅延: 200、

  // タイムアウトが指定されていてコンポーネントの読み込みがタイムアウトした場合、

  // 読み込みに失敗した場合に使用したコンポーネントを使用します。デフォルト値は: `Infinity`

  タイムアウト: 3000

});



コンポーネント:

  非同期コンポーネント、

},