単一ファイルコンポーネント (SFC)
参考：
コンポーネント
参考：
インスタンスの生成
App.vue を App としてインポートし、components に指定して Vue インスタンスを生成する。作成したインスタンスは el で指定した DOM 要素にマウントされる。
import App from './components/App.vue'
const app = new Vue({
el: '#app',
data: {
// ...
},
components: { App }
})
参考：
コンポーネントをローカル登録する
webpack / Babel により ES2015 モジュールが有効な場合の書き方
import ... from ... によって .vue ファイルからインポートした子コンポーネントを components に指定する。子コンポーネントは components で含められた親コンポーネントの描画でのみ有効となる。(依存関係にある子コンポーネントを常に明示的に含める必要がある。)
import ComponentA from './ComponentA.vue'
export default {
// ...
components: {
ComponentA
}
}
参考：
基底コンポーネントをまとめてグローバル登録する方法
参考：
基底コンポーネントの自動グローバル登録 | Vue.js [公式]
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