単一ファイルコンポーネント (SFC)

参考:

単一ファイルコンポーネント | Vue.js [公式]

コンポーネント

参考:

コンポーネントの基本 | Vue.js [公式]

インスタンスの生成

App.vueApp としてインポートし、components に指定して Vue インスタンスを生成する。作成したインスタンスは el で指定した DOM 要素にマウントされる。

import App from './components/App.vue'

const app = new Vue({
  el: '#app',
  data: {
    // ...
  },
  components: { App }
})

参考:

Vue インスタンス | Vue.js [公式]

el | Vue.js [公式]

コンポーネントをローカル登録する

webpack / Babel により ES2015 モジュールが有効な場合の書き方

import ... from ... によって .vue ファイルからインポートした子コンポーネントを components に指定する。子コンポーネントは components で含められた親コンポーネントの描画でのみ有効となる。(依存関係にある子コンポーネントを常に明示的に含める必要がある。)

import ComponentA from './ComponentA.vue'

export default {
  // ...
  components: {
    ComponentA
  }
}

参考:

ローカル登録 | Vue.js [公式]

基底コンポーネントをまとめてグローバル登録する方法

参考:

基底コンポーネントの自動グローバル登録 | 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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA