beta

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

Vue.jsのテンプレートの挙動をまとめました。

公開日:2019年4月9日

テンプレートの再利用

作成したテンプレート(./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>