Vue で親コンポーネントと子コンポーネント間の通信を実装するにはどうすればよいですか?

Vue では、コンポーネントはユーザー インターフェイスを構築する重要な部分であり、インターフェイスをより小さく再利用可能な部分に簡単に分解できます。ページには複数のコンポーネントが含まれる場合があるため、コンポーネント間の通信が重要になります。特に親コンポーネントと子コンポーネント間の通信。

Vue は、props と $emit を介して親コンポーネントと子コンポーネント間の通信を実装します。この記事では両方の方法を紹介します。

1. Props

Props は、Vue の親コンポーネントが子コンポーネントにデータを渡す方法です。 props は、子コンポーネントに渡されるデータ属性を格納する配列です。子コンポーネントでは、props を使用して親コンポーネントから渡されたデータを受け取ります。

プロパティの使用: まず、親コンポーネントでプロパティを定義します。コードは次のとおりです:

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

上記のコードでは、親コンポーネントは、message という名前のメッセージを子コンポーネントに渡します。小道具、プロパティ。

次に、子コンポーネントで props を受け取ります。

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

子コンポーネントでは、親コンポーネントによって渡されたメッセージ属性が props を介して受信されます。

このとき、親コンポーネントのページには「親コンポーネントデータ」という値が表示されます。

2. $emit

$emit は、Vue のサブコンポーネントが親コンポーネントにメッセージを送信する方法です。子コンポーネントで特定のイベントが発生すると、$emit を通じて親コンポーネントのイベント メソッドをトリガーできます。 $emit メソッドの最初のパラメーターはトリガーされるイベントの名前で、2 番目のパラメーターは親コンポーネントに渡されるパラメーターです。

$emit の使用法: まず、子コンポーネントでイベント メソッドを定義します。イベントがトリガーされたら、$emit メソッドを呼び出してメッセージを親コンポーネントに渡します。コードは次のとおりです:

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

上記のコードでは、子コンポーネントは onClick イベント メソッドを定義しています。ボタンがクリックされると、$emit メソッドを通じて child-msg という名前のイベントがトリガーされ、「子コンポーネント データ」パラメータが渡されます。 。

次に、親コンポーネントでこのイベントをリッスンします:

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

上記のコードでは、親コンポーネントは @ 記号を使用して子コンポーネントのイベントをリッスンします。子コンポーネントが child-msg イベントをトリガーすると、親コンポーネントはイベントに応答し、getChildMsg メソッドを通じて子コンポーネントから渡されたデータを受信し、そのデータをページに表示します。

上記 2 つの方法により、Vue で親コンポーネントと子コンポーネント間の通信を実現できます。コードは簡潔で理解しやすく、保守しやすいため、コンポーネント開発の効率が向上します。

以上がVue で親コンポーネントと子コンポーネント間の通信を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。