前端｜Vue Vue3 超详细 实现组件通信: 父子、子父及兄弟组件间的数据流转

在 Vue 3 中，组件之间的通信是开发中极为重要的一个环节。通过组件通信，我们能够在父组件和子组件之间传递数据，也可以实现兄弟组件之间的通信。本文将详细介绍在 Vue 3 中如何实现这些数据流转，并给出代码示例。

1. 父子组件通信

父子组件通信主要有两种方式：通过 props 向子组件传递数据，以及通过 $emit 从子组件向父组件发送事件。

通过 props 传递数据

父组件通过 props 向子组件传递数据。示例代码如下：

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
}
</script>

子组件 (ChildComponent.vue)

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上述示例中，父组件通过 parentMessage 属性将数据传递给子组件，子组件通过 props 接收这个数据并展示。

通过 $emit 发送事件

子组件通过 $emit 向父组件发送事件，通常用来传递子组件的操作或状态变化。示例代码如下：

子组件 (ChildComponent.vue)

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childMessage', 'Hello from Child!');
    }
  }
}
</script>

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component @childMessage="handleChildMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleChildMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

在这个示例中，子组件点击按钮发送事件 childMessage，父组件通过 @childMessage 监听这个事件，并在 handleChildMessage 方法中处理。

2. 子父组件通信

子组件通过 $emit 通知父组件，父组件可以做出相应的处理。上面的例子已经展示了这个过程。

3. 兄弟组件间通信

兄弟组件间的通信一般依赖于父组件进行协调。父组件可以共享一个状态，通过事件来实现兄弟组件之间的数据传递。

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-a @sendMessage="receiveMessage"></child-a>
    <child-b :receivedMessage="sharedMessage"></child-b>
  </div>
</template>

<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

export default {
  components: {
    ChildA,
    ChildB
  },
  data() {
    return {
      sharedMessage: ''
    };
  },
  methods: {
    receiveMessage(message) {
      this.sharedMessage = message;
    }
  }
}
</script>

兄弟组件 (ChildA.vue)

<template>
  <div>
    <h2>兄弟组件 A</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('sendMessage', 'Hello from Child A!');
    }
  }
}
</script>

兄弟组件 (ChildB.vue)

<template>
  <div>
    <h2>兄弟组件 B</h2>
    <p>接收到的消息: {{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    receivedMessage: String
  }
}
</script>

在这个例子中，子组件 A 点击按钮后，通过 $emit 向父组件发送一条消息，父组件接收到消息后更新 sharedMessage，并将这个信息传递给子组件 B。

总结

通过上述示例，我们可以看到在 Vue 3 中，父子组件通信、子父组件通信和兄弟组件通信各自的实现方式。熟练掌握这些技巧，有助于我们更好地构建复杂的组件交互和数据流转。通过合理地使用 props 和 $emit，我们可以将数据流转接口明确，提升代码的可维护性和可读性。