Vue コンポーネント通信: $parent/$children を介した親子コンポーネント通信-PHPチュートリアル-php.cn

Vue コンポーネント通信: $parent/$children を介した親子コンポーネント通信

WBOY

リリース： 2023-07-09 16:56:01

オリジナル

1203 人が閲覧しました

Vue コンポーネント通信: $parent/$children を介した親子コンポーネント通信

はじめに:
Vue 開発では、コンポーネントはアプリケーションを構成する基本単位です。コンポーネント通信は、コンポーネント間のデータ転送と対話の鍵となります。 Vue でコンポーネントが通信する方法は数多くありますが、一般的な方法の 1 つは、$parent と $children を介して親コンポーネントと子コンポーネントの間で通信することです。この記事では、コンポーネント通信に $parent と $children を使用する方法を詳しく説明し、よりよく理解して応用できるようにコード例を示します。

1. $parent を介した親コンポーネントから子コンポーネントへの通信

1.1 親コンポーネントが子コンポーネントにデータを渡す

Vue では、親コンポーネントが子コンポーネントにバインドされます。指定された属性を使用するサブコンポーネント。子コンポーネントは、親コンポーネントから props を通じて渡されたデータを受け取り、それをコンポーネント自体で使用できます。

サンプルコードは次のとおりです。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

ログイン後にコピー

親コンポーネントで、message データを :message="message"# を通じて子コンポーネントに渡します。 ## 。子コンポーネントは、親コンポーネントから渡されたデータを受け取り、それをコンポーネント内でレンダリングします。

1.2 サブコンポーネントは上位コンポーネントにイベントをディスパッチする

場合によっては、サブコンポーネントはイベントを親コンポーネントにディスパッチして、対応する操作を実行するように親コンポーネントに通知する必要があります。 Vue は、子コンポーネントでカスタムイベントをディスパッチするための

$emit メソッドを提供します。

サンプルコードは次のとおりです。

<!-- 父组件 -->
<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleChildEvent(payload) {
        // 处理子组件派发的事件
        console.log(payload);
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div @click="handleClick"></div>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        // 派发自定义事件，并传递给父组件
        this.$emit('childEvent', 123);
      }
    }
  }
</script>

ログイン後にコピー

子コンポーネントでは、

@click メソッドが handleClick メソッドをトリガーし、このメソッドでは、 this.$emit はカスタムイベントをディスパッチし、親コンポーネントに渡します。親コンポーネントは、@childEvent を通じてカスタムイベントをリッスンし、子コンポーネントによって送出されたイベントを handleChildEvent メソッドで処理します。

2. $children を介して子コンポーネントから親コンポーネントへ通信する

場合によっては、子コンポーネントが直接の親コンポーネントと通信する必要があります。 Vue は、子コンポーネントのインスタンスを取得するための

$children プロパティを提供します。この属性を通じて、子コンポーネントのインスタンスにアクセスできるため、子コンポーネントが親コンポーネントと通信できるようになります。

サンプルコードは次のとおりです。

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
    <button @click="changeChildData">改变子组件的数据</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    methods: {
      changeChildData() {
        // 修改子组件的数据
        this.$children[0].childData = 'Hello, parent component!';
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>{{ childData }}</div>
</template>
<script>
  export default {
    data() {
      return {
        childData: 'Hello, child component!'
      }
    }
  }
</script>

ログイン後にコピー

親コンポーネントで、

this.$children[0] を通じて子コンポーネントのインスタンスを取得します。プロパティとメソッドを使用して、対応する操作を実行できます。

結論:

この記事の導入部を通じて、読者は $parent と $children を介したコンポーネント通信についてより深く理解できると思います。実際の開発では、特定のビジネスシナリオに応じて、コンポーネントの通信に適切な方法を選択して、アプリケーションの保守性と拡張性を向上させることができます。この記事が読者にとって役立つことを願っています。

以上がVue コンポーネント通信: $parent/$children を介した親子コンポーネント通信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。