Vue コンポーネントの概要

5 分

定義上、コンポーネントは "より大きな全体の一部または要素" です。アプリケーションの作成について考える場合、通常は、小さい部分で作業し、それらを結合してより大きな全体、つまりアプリケーションを作成します。 Vue では、複数のコンポーネントを作成して、それを使って完全なアプリケーションを作成できます。

Vue コンポーネント

JavaScript ファイルを使用してコンポーネントを作成することもできますが、より一般的な方法は、.vue ファイル内で Vue 構文を使用して単一ファイルコンポーネントを作成することです。単一ファイルコンポーネントでは、よりわかりやすい構造で、より自己完結型のセットアップが可能です。また、Pug や Stylus などのさまざまなプリプロセッサを使用することもできます。

コンポーネントを作成するということは、基本的には、通常の HTML タグと同様に、アプリケーションで使用できる新しいタグを作成するということです。この形式のセマンティックタグによって、ページに表示される内容が明確になります。 <booking-form></booking-form> のようなタグの場合、予約を作成するためのフォームが表示され、<booking-list></booking-list> では予約の一覧が表示されると考えられます。

Vue コンポーネントの構造

Vue コンポーネントには、style、script、template の 3 つの主要なセクションが含まれています。

スタイル

style セクションには、任意の有効な CSS や、使用しているプリプロセッサの構文を含めることができます。

scoped 属性を使用して、CSS をその特定のコンポーネントに "スコープ" することもできます。スタイルは、そのコンポーネントにのみ適用されます。そのため、ページの他の部分を誤って変更してしまうことを心配することなく、クラスやその他の設定を作成できます。

<style>
.demo {
    font-family: Verdana
}
</style>

script

script セクションには、コンポーネントに使用されるスクリプトが格納されます。 Vue JavaScript コンポーネントと同様に、data()、methods、components などのさまざまな Vue プロパティとメソッドをエクスポートできます。

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

template

template セクションには、情報を表示し、ユーザーがデータを操作できるようにするために使用される HTML テンプレートが格納されます。 JavaScript ベースのコンポーネントを使用する場合、template は通常、.html ファイル内にあるか、JavaScript ファイル内の文字列リテラルです。

template で使用される HTML 構文は、データを表示するのにハンドルバー ({{}}) を使用するなど、JavaScript ベースのコンポーネントと同じです。

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

Note

テンプレートには 1 つのルート要素が必要です。つまり、product を id として持つ div 要素は兄弟を持つことができません。これは、前のコードに示すように、子要素のみ持つことができます。

読み込みとコンポーネント

前に取り上げたように、単一ファイルコンポーネントは .vue の拡張子で保存されます。これらのコンポーネントは、import ステートメントを使用して、他のモジュールと同様の方法で読み込むことができます。 components プロパティを使用してこれらを登録できます。登録されたコンポーネントは、template 内のタグとして使用できるようになります。

Note

import を使用してライブラリをインポートする場合、通常は、その名前にパスカルケースを使用します。この場合、各単語の最初の文字は大文字になります (たとえば、PascalCase)。しかし、HTML では、タグ名には、各単語を小文字にし、それらの間にダッシュ (-) を入れるケバブケースを使用するという規則があります。 Vue では、この 2 つの異なる規則が自動的に管理されます。

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

前のコードでは、コンポーネント ProductDisplay がインポートされ、components プロパティに追加されます。その後、テンプレートで ProductDisplay が使用されると、このコンポーネントが通常の HTML 要素ではなく解析が必要なものであることが Vue のコンパイラによって判断されます。

懸念事項の分離

HTML、CSS、および JavaScript を 1 つのファイルに配置することは、種類ごとに別々のファイルを作成するというベストプラクティスから逸脱しているように見えるかもしれません。実際には、これらのファイルを切り替えることによって、それらの間の相互依存のために開発が遅くなる可能性があります。また、ファイルを切り替えなければならないことに関連する、認識的な負荷もあります。

単一ファイルコンポーネントでは、src 属性を使用して、script と style セクションに別々のファイルを作成できます。

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>

Vue コンポーネントの概要