Vue で $parent と $children を使用して親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?

Vue での親子コンポーネント通信に $parent と $children を使用するにはどうすればよいですか?

Vue では、コンポーネントはアプリケーションを構築するための基本単位です。開発プロセスでは、コンポーネント間の通信は非常に一般的な要件です。 Vue には、$parent や $children など、コンポーネント間の通信を実装するためのいくつかの組み込みメソッドが用意されています。

$parent は現在のコンポーネントの親コンポーネントを指し、$children は現在のコンポーネントのすべての子コンポーネントを指します。これらを介して、親コンポーネントと子コンポーネントの間でデータを渡したり、メソッドを呼び出したりできます。

次に、簡単な例を使用して、親子コンポーネント通信に $parent と $children を使用する方法を示します。

まず、親コンポーネントと子コンポーネントを作成する必要があります。親コンポーネントでデータ プロパティを作成し、それを子コンポーネントに渡します。子コンポーネントはこのデータを変更し、変更されたデータを親コンポーネントに返します。

親コンポーネントのコードは次のとおりです。

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

親コンポーネントでは、親コンポーネントのデータ parentData を子コンポーネント に渡します。 ChildComponent を渡し、@change子コンポーネントの change イベントをリッスンします。子コンポーネントのデータが変更されると、親コンポーネントのデータは、 handleChange メソッド。

次に、子コンポーネントのコードを見てみましょう:

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

子コンポーネントでは、親コンポーネント childData によって渡されたデータを props として受け取ります。そしてページ上にレンダリングします。ボタンをクリックすると、子コンポーネントのデータが handleClick メソッドを通じて変更され、その後 change イベントが $emit メソッドを通じてトリガーされます。そして変更されたデータは親コンポーネントに渡されます。

これまでに、親コンポーネントと子コンポーネント間のデータ転送と通信が完了しました。親コンポーネントをページ上にレンダリングすると、親コンポーネントのデータと子コンポーネントのデータが正しく表示され、子コンポーネントのボタンをクリックすると、親コンポーネントのデータが表示されることがわかります。それに応じて変更されました。

上記の例を通して、$parent と $children を使用すると、親コンポーネントと子コンポーネントの間でデータを簡単に転送および通信できることがわかります。ただし、親コンポーネントと子コンポーネントの間には一定の結合があるため、実際の開発プロセスでは、特定のニーズとシナリオに基づいて適切な通信方法を選択する必要があります。

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