vue.jsでpropsとしてコンポーネントを渡す

前置き

Vue.jsでコンポーネントをpropsとして渡せたら便利だなと思い調べてましたが、特に解説が見当たらなかったのでメモがてら書き残しておきます。

Vue.js のバージョンは2.5.2です。

サンプル

ここ
selectタグで好きなコンポーネントを選んでマウントすることができます。

手順

まずpropsとして渡されるサブコンポーネントを定義・登録します。

var subComp = Vue.extend({
  template: `<div class="sub">サブコンポーネントだよ</div>`,
});
Vue.component('sub-component', subComp); // 'sub-component'という名前で登録

特に変わったことはしてません。

次にpropsを受け取り、サブコンポーネントを描画するメインコンポーネントを定義します。

var mainComp = Vue.extend({
  template: `<div class="main">
    <h1 class='topic'>メイン</h1>
    <div :is="contentComponent"></div>
  </div>`,
  props: {
    'contentComponent': String,
  },
});
Vue.component('main-component', mainComp);

ポイントはis属性のところです。
propsプロパティのcontentComponentは、サブコンポーネント（の名前）を受け取り、is属性値にセットされます。こうすることでdivはサブコンポーネントに置き換わります。

最後にHTMLとrootインスタンス部分です。
コンポーネント名を指定します。

<div id="app">
  <main-component
    content-component="sub-component"
  ></main-component>
</div>

new Vue({
  el: "#app",
})

マウント後、

<div id="app">
  <div class="main">
    <h1 class='topic'>メイン</h1>
    <div class="sub">サブコンポーネントだよ</div>
  </div>`
</div>

こんな感じになってればOK。（コード）

参考

https://forum.vuejs.org/t/how-to-pass-a-component-as-prop/11216