子コンポーネント [Vue.js]

子コンポーネントのイベントをハンドルする

参考：

Vue で子コンポーネントに対してイベントを付与したい – teratail

子コンポーネントを動的に追加する

参考：

Creating Vue.js Component Instances Programmatically | CSS-Tricks

Any way to dynamically add multiple Vue components within a parent Vue component? | Vue Forum

Instantiate components dynamically · Issue #254 · vuejs/Discussion – GitHub

How to mount components on the DOM dynamically? | reddit

vue js add child component to dynamicly – Stack Overflow

How to dynamically compile a component added to a template in VueJS? – Stack Overflow

SFC 内で子コンポーネントを定義する

子コンポーネントの Vue インスタンス生成に使うオプションをオブジェクトとして定義し、親コンポーネントに components として渡す。

<!-- App.vue -->
<template>

  <div id="app">
    <HelloWorld msg="Welcome to Vue.js"/>
  </div>

</template>
<script>

// inline component
const HelloWorld = {
  props: ['msg'],
  render: function (h) {
    return h('div', [
      h('h1', 'Hello world'),
      h('div', this.msg)
    ])
  }
}

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}

</script>

参考：

Writing multiple Vue components in a single file | Code with Hugo