揭秘 Vue 组件通信的 8 种方式，纵横捭阖，游刃有余

前端

2023-11-28 12:27:34

Vue 组件通信：掌握八大法宝，纵横捭阖

父子组件间的通信：数据传递的基石

父组件向子组件传递值： 父组件通过 props 向子组件传递数据，建立单向的数据流。
子组件向父组件传递值： 子组件通过 emit 事件向父组件发送数据，实现逆向的数据流。

获取组件实例：洞察组件内部

父组件获取子组件实例： 父组件可通过 refs 和 children 获取子组件的 DOM 元素和组件实例，实现对子组件的直接访问。
子组件获取父组件实例： 子组件可通过 $parent 获取父组件的组件实例，建立双向的组件交互。

共享数据与双向通信

provide / inject： 允许组件向子组件提供数据，无需显式传递，实现数据的层级共享。
attrs 和 listeners： 获取父组件的属性和方法，实现子组件与父组件的双向通信。

状态管理与全局统筹

Vuex： 提供集中式的数据存储和管理机制，实现组件之间的数据共享。
自定义事件： 创建自己的事件，实现组件之间的灵活交互，支持复杂组件协作。

代码示例

// 父组件向子组件传递值
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent component!'
    };
  }
};
</script>

// 子组件向父组件传递值
<template>
  <button @click="emitMessage">Emit Message</button>
</template>

<script>
import { ref } from 'vue';

export default {
  emits: ['message'],
  setup() {
    const message = ref('');

    const emitMessage = () => {
      message.value = 'Message from child component!';
      this.$emit('message', message.value);
    };

    return {
      message,
      emitMessage
    };
  }
};
</script>