Vue 组件通信详细介绍整合

在 Vue 中，组件通信是指不同组件之间传递数据或触发事件的机制。随着应用复杂度的增加，组件之间的通信需求变得多种多样。本文将从父子组件、兄弟组件、祖孙组件以及非关系组件等角度，详细讲解 Vue 中常见的组件通信方式。

组件通信的分类

1. 父子组件之间的通信
2. 兄弟组件之间的通信
3. 祖孙组件之间的通信
4. 非关系组件之间的通信

组件通信的方法

1. 父组件传递数据给子组件（props）

父组件可以通过在子组件的标签上绑定属性的方式，将数据传递给子组件。子组件通过 props 接收父组件传递的数据。

<!-- 父组件 -->
<Children name="jack" :age="18" />

<!-- 子组件 -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String, // 接收字符串类型的 name 属性
    age: {
      type: Number, // 接收数值类型的 age 属性
      default: 18,  // 默认值为 18
      required: true // age 属性必须传递
    }
  }
};
</script>

2. 子组件传递数据给父组件（$emit）

子组件通过 $emit 方法触发自定义事件，并可以传递参数。父组件通过监听子组件的自定义事件来接收数据。

<!-- 父组件 -->
<template>
  <div>
    <Children @add="handleAdd" />
  </div>
</template>

<script>
export default {
  methods: {
    handleAdd(good) {
      console.log('商品信息：', good); // 接收子组件传递的数据
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="addToCart">添加到购物车</button>
</template>

<script>
export default {
  methods: {
    addToCart() {
      const good = { id: 1, name: '商品' };
      this.$emit('add', good); // 触发父组件的 'add' 事件并传递数据
    }
  }
};
</script>

3. 父组件通过 ref 访问子组件实例

父组件可以通过 ref 属性引用子组件的实例，从而访问子组件的方法和数据。

<!-- 父组件 -->
<template>
  <div>
    <Children ref="childComponent" />
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getChildData() {
      console.log(this.$refs.childComponent.dataFromChild); // 访问子组件的数据
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ dataFromChild }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromChild: '子组件的数据'
    };
  }
};
</script>

4. 兄弟组件之间的通信（事件总线 EventBus）

对于没有直接父子关系的兄弟组件，可以通过事件总线（EventBus）来实现通信。

// bus.js (事件总线)
import Vue from 'vue';
export default new Vue();

<!-- 兄弟组件 A -->
<script>
import bus from './bus';
export default {
  methods: {
    sendMessage() {
      bus.$emit('message', '来自组件 A 的消息'); // 通过事件总线发送消息
    }
  }
};
</script>

<!-- 兄弟组件 B -->
<script>
import bus from './bus';
export default {
  mounted() {
    bus.$on('message', (msg) => {
      console.log(msg); // 接收兄弟组件 A 发送的消息
    });
  }
};
</script>

5. 祖孙组件通信（provide 和 inject）

provide 和 inject 是 Vue 提供的用于跨层级组件之间数据传递的方法，适合用于深层嵌套的组件树结构中。

<!-- 祖先组件 -->
<template>
  <div>
    <Grandchild />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      foo: '提供给孙组件的数据'
    };
  }
};
</script>

<!-- 孙组件 -->
<template>
  <div>
    <p>{{ foo }}</p>
  </div>
</template>

<script>
export default {
  inject: ['foo'] // 接收祖先组件提供的数据
};
</script>

6. 复杂关系的组件通信（Vuex）

在大型项目中，组件之间的通信可能会变得复杂和难以管理。此时，可以使用 Vuex 来管理全局状态。

// store.js (Vuex 状态管理)
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  }
});

<!-- App.vue (使用 Vuex) -->
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount; // 通过 getters 获取计算属性
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment'); // 通过 mutation 同步更新状态
    },
    decrement() {
      this.$store.commit('decrement');
    },
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement'); // 通过 action 异步更新状态
    }
  }
};
</script>