VUE3 開発入門: コンポーネントの使用

Vue は、特に Web アプリケーション開発で人気のある JavaScript フレームワークです。 VUE3 バージョンのリリースにより、VUE には以前の利点があるだけでなく、オブジェクト指向プログラミングやパフォーマンスの向上など、いくつかの新機能が追加されています。この記事では、VUE3 でのコンポーネントの使い方と、コンポーネントを使用して簡単な Web ページを構築する方法を紹介します。

VUE コンポーネントとは何ですか?

VUE コンポーネントは、ユーザー インターフェイスの作成に使用される再利用可能なコード モジュールです。各コンポーネントには HTML、JavaScript、CSS コードが含まれており、単一のエンティティとしてコード内で直接使用できます。

単純なボタン コンポーネントを例に挙げます。そのコードは次のとおりです:

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

このボタン コンポーネントには、ボタンにテキストを表示するために使用されるプロパティ buttonText があります。コンポーネントを使用するときは、この属性を渡す必要があります。このコンポーネントを使用するサンプル コードを次に示します。

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

ここでは、コンポーネントが Vue に導入され、テンプレートで使用されます。

コンポーネントの作成と使用

新しいコンポーネントを作成するには、Vue が提供する Vue.component() メソッドを使用する必要があります。このメソッドは、コンポーネント名とコンポーネントを定義するオブジェクトという 2 つのパラメーターを受け取ります。以下は最も単純なコンポーネントの例です。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

このコード スニペットでは、コンポーネント名を除く他のすべてのコードがオブジェクトで定義されています。コンポーネント変数は通常、クラス名に大文字を使用してコンポーネントを通常の HTML マークアップと区別するなど、慣用的な方法を使用して定義されます。

このコンポーネントを Vue に導入します:

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

現時点では、このコンポーネントをテンプレートで使用できます。

VUE3 でのコンポーネントの使用

VUE3 では、コンポーネントを作成および使用するためのより良い方法が提供されます。 VUE3 では、createApp メソッドを使用して Vue アプリケーションを作成し、app.component() メソッドを使用してコンポーネントを登録します。以下はサンプル コードです:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

上記のコードでは、createApp メソッドを使用して Vue アプリケーションを作成し、app.component() を使用してコンポーネントを登録します。コードの最後の行は、アプリケーションを HTML ドキュメントにマウントするために使用されます。

パラメータを渡すコンポーネント

上で述べたように、VUE でのコンポーネントの一般的な使用法は、プロパティとイベントを渡すことです。たとえば、次のコード スニペットでは、

<MyComponent :width="200" @clicked="onClick" />

width 属性がコンポーネントに渡され、コンポーネントがクリックされると clicked イベントがトリガーされ、ここでの onClick がイベント ハンドラーです。

渡されたプロパティとイベントをコンポーネントで使用するには、VUE が提供する props メソッドと Emit メソッドを使用する必要があります。例:

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

コンポーネントでは、プロパティは props オブジェクトの一部として宣言されます。デフォルトでは、プロップは任意のタイプです。この例では、幅属性は数値タイプとして定義され、デフォルト値 100 が割り当てられます。テンプレートでは、幅が渡され、コンポーネントのスタイルを更新するために使用されます。

コンポーネント内でのイベントの使用は非常に簡単です。$emit メソッドを使用してイベントを呼び出すだけです。この例では、ユーザーがコンポーネントをクリックすると、clicked イベントが呼び出されます。

概要

Vue は強力な JavaScript フレームワークであり、そのコンポーネント システムは再利用可能でスケーラブルな Web アプリケーションを構築する上で重要な部分です。この記事では、Vue を使用してコンポーネントを作成および使用する方法、Vue3 の createApp メソッドを使用して Vue アプリケーションを作成する方法、および app.component() メソッドを使用してコンポーネントを登録する方法を紹介します。コンポーネントは props と Emit メソッドを使用してプロパティとイベントを渡すことができます。この記事が VUE を学習したい開発者に役立つことを願っています。

以上がVUE3 開発入門: コンポーネントの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。