Vueでの子コンポーネントの作成

内部のコンポーネントは、 以前作業したメインコンポーネントと 同じ構造を持っています。つまり、 各コンポーネントのファイルには タグ script と template が 含まれます。

例として、 User という名前のコンポーネントを 作成してみましょう。 そのコードを対応するファイルに 配置します：

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

コンポーネントの data オブジェクトには いくつかのデータを配置できます：

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

これらのデータはコンポーネントの ビューに表示することができます：

components/User.vue<template>
  {{ name }}
</template>

次に、作成したコンポーネントを メインコンポーネントに接続しましょう。 そのためには、まずインポートします：

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

components 設定にその名前を 記述します：

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

親コンポーネントのビューでは、 子コンポーネントのビューを 表示することができます。 そのためには、コンポーネント名に 対応する名前のタグを記述する必要があります。 これを行いましょう：

App.vue<template>
  <User />
</template>