Vue.jsのテンプレート挙動まとめ

テンプレートの再利用

作成したテンプレート（./components/FormA.vue）を、他のテンプレート（./components/HelloWorld.vue）から呼び出して使う際は、

<script>
import FormA from './FormA.vue' #インポートする

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  components: {
    FormA # コンポーネント登録をする
  }
}

でインポートして、componentsに登録をします。インポートだけでは使えません。

テンプレート側で表示する際は、HTMLタグのように書くことでコンポーネントを表示させます。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form-a /> <!--ここを追加 -->
  </div>
</template>

コードをみただけではわかりづらいのは、「<form-a />」のルールですが、基本的には、

• コンポーネント名の小文字
• 最初ではなく、名前の途中に大文字がある場合（キャメルケース）は「-（ケバブケース：ハイフン区切り）」になります。

また、再利用する際に別の名前を使いたい場合は、配列形式で記述すればOKです。

フォーマットは、「’呼び出し名’: コンポーネント名」という形式になります。

<script>
import FormA from './FormA.vue' #インポートする

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  components: {
    'user-form': FormA # FormAコンポーネントを「user-form」タグで呼びさせるようにする
  }
}

こうすることで、FormAコンポーネントは、<user-form />というタグで呼び出せるようになります。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <user-form /> <!--タグ名が変わる -->
  </div>
</template>