【Vue CLI】componentの中に他のcomponentを挿入する

Vue CLI Vue.js

ヘッダーやフッターにも使えるテクニックとして、Vue CLIで立ち上げたプロジェクト内にてあるコンポーネントの中に他のコンポーネントを表示する方法をメモしておきます。

src/views/Product.vue（表示する親側のコンポーネント）

<template>
        <ProductPhoto />
</template>

<script>
import ProductPhoto from '@/views/ProductPhoto.vue'
export default {
    components: {
        ProductPhoto
    }
}
</script>

src/views/ProductPhoto.vue（表示される子側のコンポーネント）

<template>
  <div class="productphotos">
    <h1>写真用コンポーネント</h1>
  </div>
</template>


以上です。