Vue3 コンポーネント

すべての Vue コンポーネントは独立した Vue インスタンスであり、独自のテンプレート、データ、メソッド、ライフサイクルフックを持ちます。これにより、コンポーネントは自己完結的に独自の機能とスタイルを定義・管理できます。

コンポーネント（Component）は Vue.js の最も強力な機能の 1 つです。

コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化でき、ユーザーインターフェースを独立した再利用可能な部分に分割するのに役立ちます。

すべての Vue コンポーネントは独立した Vue インスタンスであり、独自のテンプレート、データ、メソッド、ライフサイクルフックを持ちます。これにより、コンポーネントは自己完結的に独自の機能とスタイルを定義・管理できます。

Vue コンポーネントの特徴と利点

  • 再利用性: コンポーネントはさまざまな場所で何度も使用でき、コードの再利用性と保守性を高めます。
  • カプセル化: 各コンポーネントは独立したスコープを持ち、自身の状態とロジックをカプセル化して、グローバル汚染を防ぎます。
  • 組み合わせ性: 複数の小さなコンポーネントを組み合わせて複雑なインターフェースを構築できます。
  • リアクティブ: コンポーネントのデータはビューにリアクティブにバインドされ、データが更新されるとビューが自動的に更新されます。
  • モジュール化: モジュール開発をサポートし、最新のフロントエンドツールチェーンを使用して構築・管理できます。

コンポーネントシステムにより、独立した再利用可能な小さなコンポーネントを使って大規模なアプリケーションを構築でき、ほぼすべての種類のアプリケーションのインターフェースをコンポーネントツリーとして抽象化できます。

すべての Vue アプリケーションは createApp 関数を使用して作成されます。createApp に渡すオプションはルートコンポーネントを構成するために使用されます。アプリケーションをマウントすると、そのコンポーネントがレンダリングの起点として使用されます。

アプリケーションは DOM 要素にマウントする必要があります。

次の例では、Vue アプリケーションを

にマウントします。#app を渡す必要があります：

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

グローバルコンポーネントを登録する構文は次のとおりです：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-nameはコンポーネント名、/* ... */部分は構成オプションです。登録後、次の方法でコンポーネントを呼び出すことができます：

<my-component-name></my-component-name>

シンプルな Vue コンポーネントの例：

グローバルコンポーネントの例

シンプルなグローバルコンポーネント サンプル を登録して使用します：

<div id="app"> <サンプル></サンプル> </div> <script>// Vue アプリケーションを作成 const app = Vue.createApp({}) // サンプル という名前の新しいグローバルコンポーネントを定義 app.component('サンプル', { template: '<h1>カスタムコンポーネント！</h1>' }) app.mount('#app') </script>

試してみる »

次に、button-counter コンポーネントを登録します。クリックするたびにカウンターが 1 ずつ増加します：

例

// Vue アプリケーションを作成
const app = Vue.createApp({})

// button-counter という名前の新しいグローバルコンポーネントを定義
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
クリック：{{ count }}回！
    </button>`
})
app.mount('#app')
</script>

試してみる »

注意：template 内の`はバッククォートであり、シングルクォートではありません'。

コンポーネントの再利用

コンポーネントは何度でも再利用できます：

例

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

試してみる »

グローバルコンポーネント

上記の例では、コンポーネントは component を使用してグローバルに登録されているだけです。

グローバル登録されたコンポーネントは、その後作成される app インスタンスのテンプレートで使用できます。ルートインスタンスのコンポーネントツリー内のすべての子コンポーネントのテンプレートでも使用できます。

グローバルコンポーネントの例

シンプルなグローバルコンポーネント サンプル を登録して使用します：

<div id="app"> <サンプル></サンプル> </div> <script>// Vue アプリケーションを作成 const app = Vue.createApp({}) // サンプル という名前の新しいグローバルコンポーネントを定義 app.component('サンプル', { template: '<h1>カスタムコンポーネント！</h1>' }) app.mount('#app') </script>

試してみる »

ローカルコンポーネント

グローバル登録は必ずしも理想的ではありません。たとえば、webpack のようなビルドシステムを使用している場合、すべてのコンポーネントをグローバル登録すると、もう使用していないコンポーネントでも最終的なビルド結果に含まれてしまいます。これにより、ユーザーがダウンロードする JavaScript が不必要に増加します。

このような場合、通常の JavaScript オブジェクトを使用してコンポーネントを定義できます：

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

次に、components オプションで使用したいコンポーネントを定義します：

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

components オブジェクトの各プロパティについて、プロパティ名はカスタム要素の名前（component-a、component-b）であり、プロパティ値はそのコンポーネントのオプションオブジェクト（ComponentA、ComponentB）です。

インスタンスオプションでローカルコンポーネントを登録することもできます。これにより、そのコンポーネントはこのインスタンス内でのみ使用できます：

ローカルコンポーネントの例

シンプルなローカルコンポーネント サンプルA を登録して使用します：

<div id="app"> <サンプル-a></サンプル-a> </div> <script> var サンプルA = { template: '<h1>カスタムコンポーネント！</h1>' } const app = Vue.createApp({ components: { 'サンプル-a': サンプルA } }) app.mount('#app') </script>

試してみる »

単一ファイルコンポーネント (.vue ファイル)

単一ファイルコンポーネントを使用すると、Vue コンポーネントをより適切に整理・管理できます。コンポーネントは通常、テンプレート、スクリプト、スタイルの 3 つの部分で構成されます。

例

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* コンポーネント専用スタイル */
p {
  color: blue;
}
</style>

Prop

prop は、子コンポーネントが親コンポーネントから渡されたデータを受け取るためのカスタム属性です。

親コンポーネントのデータは props を介して子コンポーネントに渡す必要があります。子コンポーネントは props オプションで明示的に "prop" を宣言する必要があります：

Prop の例

<div id="app"> <site-name title="Google"></site-name> <site-name title="サンプル"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </script>

試してみる »

コンポーネントはデフォルトで任意の数の prop を持つことができ、任意の値を任意の prop に渡すことができます。

動的 Prop

v-bind を使用して HTML 属性を式にバインドするのと同様に、v-bind を使用して props の値を親コンポーネントのデータに動的にバインドできます。親コンポーネントのデータが変化すると、その変化は子コンポーネントにも伝達されます：

Prop の例

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'サンプル' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

試してみる »

Prop の検証

コンポーネントは props に検証要件を指定できます。

prop の検証方法をカスタマイズするには、props の値に対して文字列配列ではなく、検証要件を含むオブジェクトを提供できます。例：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

prop の検証が失敗した場合、（開発環境ビルド版の）Vue はコンソールに警告を表示します。

type には次のネイティブコンストラクターを指定できます：

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

type はカスタムコンストラクターにすることもでき、instanceof を使用して検出されます。

その他の拡張