完成形

参考コード

components/Name.vue
<template>
  <h2>My name is Nakanishi.</h2>
</template>

<script></script>

<style></style>
components/App.vue
<template>
  <div class="wrapper">
    <Name />
    <h2 class="title">
      Vue + Vuex<br />
      入門コース
    </h2>
    <p class="body">わかりやすいと評判！！</p>
  </div>
</template>

<script>
import Name from "./components/Name";

export default {
  components: { Name }
};
</script>

まず components/Name.vue を作る

新しくファイルを作成して、以下の内容にします。

内容は比較的自由です。

これが新しいコンポーネント = 部品です。

components/Name.vue
<template>
  <h2>My name is Nakanishi.</h2>
</template>

<script></script>

<style></style>

App.vue で先ほど作ったコンポーネントを import する

作った部品は、読み込んで使わなければいけません。

まずは読み込みます。

App.vue
<script>
import Name from "./components/Name";
</script>

指定の変数名に、指定した場所にあるファイルの内容を読み込む書き方です。

import 変数名 from "場所"

component を使う設定を <script /> に書く

コンポーネントを読み込んだだけでは使えません。

さらに使うための設定を <script /> に書きます。以下の部分です。

App.vue
<script>
import Name from "./components/Name";

// 読み込んだ Name コンポーネントを
// 使えるようにする設定
export default {
  components: { Name }
};
</script>

export default ってなんなのか？

これは Vue 特有ではなくて、JavaScript の書き方です。

出力します。出力するって？

一旦置いておきましょう。

<script /> 内では JavaScript が書ける

この部分は JavaScript が書けて実行できます。

script 内
<script>
alert("Hey")
console.log("Yo")  
</script>

export default でそのコンポーネント設定用のオブジェクトを出力している

まずオブジェクトを書いて、

普通の JavaScript オブジェクトの書き方
{
  components: { Name },
  name: 'Some-name',
}

それを export default で出力している。

App.vue
<script>
export default {
  components: { Name }
};
</script>

ここまでの手順のまとめ

  • component を作る
  • それを使用するコンポーネントで読み込む (import 変数名 from "場所")
  • 読み込んだコンポーネントを使用する設定を書く export default { components: { Name } }

上記設定をした上で、<Name /> を template 内に記述する

すると、読み込んだ Name コンポーネントが画面に出てくる。

App.vue
<template>
  <div class="wrapper">
    <Name />
    <h2 class="title">
      Vue + Vuex<br />
      入門コース
    </h2>
    <p class="body">わかりやすいと評判！！</p>
  </div>
</template>