Vue ドキュメントの親子コンポーネント値伝達関数の概要

Vue は、ユーザー インターフェイスを構築するための簡単かつ便利な方法を提供する人気のある JavaScript フレームワークです。 Vue では、コンポーネントはアプリケーションを構築するための基本単位です。コンポーネントを他のコンポーネント内にネストして親子関係を形成することができます。コンポーネント間の通信、特に親コンポーネントと子コンポーネント間の通信は Vue アプリケーションの重要な側面です。 Vue では、親コンポーネントと子コンポーネント間の通信は、親コンポーネントを介してプロパティまたはメソッドを渡すことによって実現できます。この記事では、Vue ドキュメントの親子コンポーネント値伝達関数を紹介します。

親コンポーネントは子コンポーネントにプロパティを渡します

Vue では、プロパティは親コンポーネントと子コンポーネント間の通信の最も基本的な方法の 1 つです。親コンポーネントは、子コンポーネントの props オプションを通じてプロパティを子コンポーネントに渡します。子コンポーネントの props オプションは、子コンポーネントが受け入れることができるプロパティのリストを含む配列を宣言します。子コンポーネントは、ローカル状態を読み取っているかのように、これらのプロパティにアクセスできるようになります。

次のコードは、Vue で子コンポーネントにプロパティを渡す方法を示しています。

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from parent component"
    };
  }
};
</script>

この例では、親コンポーネントから子コンポーネントにプロパティを渡す方法が使用されています。このうち、プロパティ parentMessage は親コンポーネントで定義され、子コンポーネント child-component の message プロパティにバインドされています。子コンポーネントがプロパティを受け取ると、そのプロパティはコンポーネント内で使用可能になります。

サブコンポーネントは親コンポーネントにイベントを渡す

Vue の親コンポーネントとサブコンポーネント間のもう 1 つの一般的な通信方法は、サブコンポーネントを通じてイベントを親コンポーネントに渡すことです。子コンポーネントは、$emit メソッドを通じてカスタム イベントをトリガーし、データをパラメータとして親コンポーネントに渡すことができます。

次のコードは、Vue で子コンポーネントを実装して親コンポーネントにイベントを渡す方法を示しています。

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("button-clicked", "button clicked from child component");
    }
  }
};
</script>

この例では、子コンポーネントはクリック イベントを使用して handleClick メソッド。このメソッドは、this.$emit メソッドを使用して、button-clicked という名前のカスタム イベントを親コンポーネントに渡します。親コンポーネントでは、v-on ディレクティブを使用してイベントをリッスンし、コールバック関数を実行できます。

<template>
  <div>
    <child-component @button-clicked="handleButtonClick"></child-component>
    <p> Message from child component: {{ messageFromChild }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ""
    };
  },
  methods: {
    handleButtonClick(data) {
      this.messageFromChild = data;
    }
  }
};
</script>

この例では、親コンポーネントは v-on ディレクティブを使用して子コンポーネントのクリック イベント button-clicked をリッスンし、子コンポーネントを使用します。コンポーネントを呼び出してコールバック関数データに渡し、親コンポーネントの状態を更新します。

概要

親コンポーネントと子コンポーネント間の通信は、Vue アプリケーションの重要な側面です。 Vue のドキュメントでは、親コンポーネントと子コンポーネント間の通信を実装する複数の方法が提供されています。この記事では、親コンポーネントが子コンポーネントにプロパティを渡す方法と、子コンポーネントが親コンポーネントにイベントを渡す方法の 2 つの通信方法を紹介します。これらのメソッドを使用すると、開発者は複雑な Vue コンポーネントを簡単に構築できます。 Vue でのコンポーネント通信についてさらに詳しく知りたい場合は、Vue の公式ドキュメントをさらに読むことができます。

以上がVue ドキュメントの親子コンポーネント値伝達関数の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。