Vue での props と $emit の使用法と違い

Vue における props と $emit の使用法と違い

Vue では、コンポーネント間の通信は非常に重要な概念です。 Vue は、コンポーネント間の通信を実装するために props と $emit という 2 つのメソッドを提供します。この記事では、props と $emit の使用法と違いを詳しく紹介し、コード例で説明します。

1. Props
Props は、親コンポーネントが子コンポーネントにデータを渡す方法です。親コンポーネントは、props を通じてあらゆる種類のデータを子コンポーネントに渡すことができ、子コンポーネントはこのデータを受信して​​使用できます。

1.1 親コンポーネントでプロパティを定義する

親コンポーネントでサブコンポーネントを使用する場合、サブコンポーネントのラベルに属性を追加することで、サブコンポーネントにデータを渡すことができます。例:

<template>
  <div>
    <!-- 使用子组件，并通过props传递数据 -->
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

この例では、ChildComponent タグに message という名前のプロパティを追加し、親コンポーネントの message 変数に値を設定することで、データを子コンポーネントに渡します。

1.2 子コンポーネントで props を受信する

子コンポーネントでは、props オプションを通じて親コンポーネントから渡されたデータを受信できます。例:

<template>
  <div>
    <!-- 子组件中使用props -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

この例では、props オプションを使用して message という名前のプロパティを定義し、その型を String として指定します。子コンポーネントは、message 属性を直接使用して、親コンポーネントから渡されたデータを取得できます。

2. $emit
$emit は、子コンポーネントが親コンポーネントにデータを渡す方法です。子コンポーネントは、$emit を通じてカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。

2.1 子コンポーネントでのイベントのトリガー

子コンポーネントでは、this.$emit を使用してカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。例:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 通过$emit触发一个自定义事件，并向父组件传递数据
      this.$emit('message', 'Hello Vue!')
    }
  }
}
</script>

この例では、@click イベント リスナーをボタンに追加し、イベント ハンドラー関数で this.$emit を使用して message という名前のカスタム イベントをトリガーし、「Hello」という名前のデータを渡します。ビュー！

2.2 親コンポーネントでのイベントの受信

親コンポーネントでは、子コンポーネントのラベルに v-on を追加することで、子コンポーネントによってトリガーされたイベントをリッスンし、対応するイベントハンドラ関数 渡されたデータを受け取ります。例:

<template>
  <div>
    <!-- 监听子组件的自定义事件 -->
    <ChildComponent @message="onMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessage(data) {
      // 在事件处理函数中接收子组件传递过来的数据
      console.log('收到消息:', data)
    }
  }
}
</script>

この例では、ChildComponent タグで v-on を使用して、子コンポーネントのカスタム イベント メッセージをリッスンし、onMessage イベント ハンドラーで子コンポーネントによって渡されたデータを受信します。

3. props と $emit の違い

Props と $emit はどちらもコンポーネント間の通信を実装するために使用されますが、その使用方法とアクションの方向には特定の違いがあります。

Props は、親コンポーネントがデータをサブコンポーネントに渡す方法です。データは属性の形式でサブコンポーネントに渡され、サブコンポーネントは props オプションを使用して、受け取る必要がある属性を宣言し、それらを使用できます。通常の属性と同様に、このデータを使用します。

$emit は、子コンポーネントが親コンポーネントにデータを渡す方法です。子コンポーネントは this.$emit を使用してカスタム イベントをトリガーし、データを親コンポーネントに渡し、v-on を渡すことができます。親コンポーネント。子コンポーネントによってトリガーされたイベントをリッスンし、対応するイベント ハンドラーでデータを受信します。

props のデータ フローは親コンポーネントから子コンポーネントへの一方向の流れであり、親コンポーネントは子コンポーネントにデータを渡します。 $emit のデータフローは子コンポーネントから親コンポーネントへの一方向の流れで、子コンポーネントはイベントをトリガーして親コンポーネントにデータを渡します。

概要:
props は、サブコンポーネントにデータを渡すために親コンポーネントによって使用されます。データは属性の形式でサブコンポーネントに渡され、サブコンポーネントは props オプションを通じてデータを受け取ります。
$emit は、親コンポーネントにデータを渡すために子コンポーネントによって使用されます。子コンポーネントは、this.$emit を通じてカスタム イベントをトリガーし、データを親コンポーネントに渡します。親コンポーネントは、 v-on を介して子コンポーネントを取得し、イベント ハンドラー関数でデータを受信します。

上記は、Vue における props と $emit の使い方と違いについて詳しく説明したもので、コンポーネント間の通信を理解するのに役立つことを願っています。

以上がVue での props と $emit の使用法と違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。