Vuejsでコンポーネントを読み込んで使いたいっ！

そもそもコンポーネントはそういうものだとは思いますが。

まずはHogeコンポーネントを追加しました。

Hoge.vue<template>
  <div>Hoge!!</div>
</template>
 
<script></script>

Hoge.vue
`<template>` `<div>Hoge!!</div>` `</template>` `<script></script>`

HogeコンポーネントをFooコンポーネントで読み込んでみます。

Foo.vue<template>
  <div>
    <Hoge />
  </div>
</template>
 
<script>
import Hoge from "./Hoge";
 
export default {
  components: { Hoge }
};
</script>

Foo.vue
`<template>` `<div>` `<Hoge />` `</div>` `</template>` `<script>` `import` `Hoge from` `"./Hoge";` `export` `default` `{` `components: { Hoge }` `};` `</script>`

コンポーネントの単位(大きさ)はどのくらいがいいのかなーと思いながらAtomic Designを調べたりしてます。

Vuejsでコンポーネントを読み込んで使いたいっ！

関連記事