Vue3 のメソッド機能: Vue3 コンポーネント間の通信方法をマスターする

Vue3 は、現在最も人気のあるフロントエンド フレームワークの 1 つです。強力な機能とシンプルで使いやすい API が高く評価されています。 Vue3 は、コンポーネント間通信、状態管理、動的コンポーネントなど、さまざまなコンポーネントを整理して操作するための多くの方法を提供します。 Vue3ではコンポーネント間の通信を実現するメソッド関数がいくつかあるので、これらをマスターしてみましょう。

1. props

props は Vue3 の重要な機能で、コンポーネントのプロパティを定義し、データを転送する方法です。コンポーネントからその子コンポーネントにデータを渡す必要がある場合は、props を使用できます。子コンポーネントの props オプションで、受け入れたいプロパティを含む配列を指定できます。親コンポーネントからプロパティを渡すと、これらのプロパティは自動的に子コンポーネントに渡され、子コンポーネントで使用できるようになります。以下は簡単な例です:

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

子コンポーネントでは、props を通じてデータを受信できます:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

各属性の型は props オプションで指定する必要があることに注意してください。これにより、子コンポーネントに渡されるデータ型が正しいことが保証されます。

2. emit

emit は、Vue3 で一般的に使用されるもう 1 つのコンポーネント間通信メソッドです。子コンポーネントでイベントをトリガーする必要がある場合は、emit メソッドを使用できます。親コンポーネントでは、このイベントをリッスンしていくつかの操作を実行できます。以下は簡単な例です:

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

子コンポーネントでは、$emit を使用してイベントをトリガーできます:

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

ユーザーがボタンをクリックすると、子コンポーネントがアラートをトリガーしますイベントを作成し、親コンポーネントにメッセージを渡します。

3. provide/inject

provide/inject は、Vue3 によって提供される別のコンポーネント間通信メソッドです。子コンポーネントにデータを提供できるという点で、props や Emit とは少し異なります。子コンポーネントは、注入オプションを通じてこのデータを受け取ることができます。以下は簡単な例です:

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

子コンポーネントでは、inject オプションを使用してこのデータを受信できます:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

受信する必要があるデータの名前は次のとおりであることに注意してください。 inject オプションで指定すると、子コンポーネントで直接使用できます。

4. $parent / $children

$parent と $children は、Vue3 が提供するコンポーネント間の通信用のもう 2 つのツールです。 $parent は、子コンポーネントからその親コン​​ポーネントのプロパティまたはメソッドにアクセスするために使用され、$children は、親コンポーネントからその子コンポーネントのプロパティまたはメソッドにアクセスするために使用されます。これら 2 つのオプションは Vue3 で提供されているため、Vue3 の将来のバージョンでは廃止される可能性があります。

5. $attrs / $listeners

$attrs と $listeners は、Vue3 が提供する 2 つの魔法のオプションです。 $attrs オプションは、コンポーネントに渡されるすべての属性を提供します。これらの属性は、次のように子コンポーネントの props オプションとともに使用できます。

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

In the ChildComponent:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

In In上記の例では、サブコンポーネントは $attrs オプションを使用して、対応する props オプションを受け取り、定義できます。

$listeners オプションは、親コンポーネント内のすべてのイベント リスナーをコンポーネントに提供します。これにより、これらのイベント リスナーを子コンポーネントで使用できるようになります。以下に示すように:

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

ユーザーがボタンをクリックすると、親コンポーネントのイベント リスナーが起動されます。

概要

この記事では、Vue3 で一般的に使用されるコンポーネント間通信方法をリストします。これらのメソッドには、props、emit、provide/inject、$parent/$children、および $attrs/$listeners が含まれます。これらの方法は、さまざまなコンポーネントをより適切に整理して操作し、開発効率を向上させ、ユーザー エクスペリエンスを向上させるのに役立ちます。実際には、ビジネス目標を達成するために複数の方法を同時に使用する必要がある場合があるため、オプションを認識し、それらがいつ、どこに適用されるかを把握してください。

以上がVue3 のメソッド機能: Vue3 コンポーネント間の通信方法をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。