Communication des composants Vue : communication des composants parent-enfant via $parent/$children

Communication des composants Vue : communication des composants parent-enfant via $parent/$children

Introduction :
Dans le développement de Vue, les composants sont les unités de base qui constituent les applications. La communication entre les composants est la clé du transfert de données et de l'interaction entre les composants. Il existe de nombreuses façons pour les composants de communiquer dans Vue. L'une des méthodes les plus courantes consiste à communiquer entre les composants parent et enfant via $parent et $children. Cet article expliquera en détail comment utiliser $parent et $children pour la communication des composants et fournira des exemples de code pour une meilleure compréhension et application.

1. Communication du composant parent au composant enfant via $parent

1.1 Le composant parent transmet les données au composant enfant

Dans Vue, le composant parent transmet les données au composant enfant en liant les propriétés du composant enfant. Les composants enfants peuvent recevoir des données transmises par le composant parent via props et les utiliser dans le composant lui-même. 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 方法中处理子组件派发的事件。

二、通过 $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]

rrreee
Dans le composant parent, transmettez les données message au composant enfant via :message="message". Le composant enfant reçoit les données transmises par le composant parent et les restitue dans le composant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!