博客站

在 Vue 3 中，组件通信是一个非常重要的主题。根据组件之间的关系和通信需求，可以选择不同的通信方式。以下是 Vue 3 中常见的组件通信方式：

1. 父子组件通信

• Props：父组件通过 props 向子组件传递数据。
• 自定义事件：子组件通过 $emit 触发事件，父组件通过 v-on 监听事件。

示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" @update-message="updateMessage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.parentMessage = newMessage;
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello from Child');
    },
  },
};
</script>

2. 子父组件通信

• 自定义事件：子组件通过 $emit 触发事件，父组件通过 v-on 监听事件。

示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log('Received message:', message);
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

3. 兄弟组件通信

• 事件总线：通过一个全局的事件总线（Event Bus）来实现兄弟组件之间的通信。
• Vuex：使用 Vuex 状态管理库来共享状态。

事件总线示例：

// eventBus.js
import { createApp } from 'vue';
export const eventBus = createApp({});

// ComponentA.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.config.globalProperties.$emit('message-sent', 'Hello from Component A');
    },
  },
};
</script>

// ComponentB.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    eventBus.config.globalProperties.$on('message-sent', (message) => {
      this.message = message;
    });
  },
};
</script>

4. 跨层级组件通信

• Provide / Inject：祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

示例：

<!-- AncestorComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from Ancestor');
  },
};
</script>

<!-- DescendantComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  setup() {
    const message = inject('message');
    return { message };
  },
};
</script>

5. 全局状态管理

• Vuex：Vuex 是 Vue 的官方状态管理库，适用于大型应用中的全局状态管理。

示例：

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    message: 'Hello from Vuex',
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    },
  },
});

export default store;

// ComponentA.vue
<template>
  <button @click="updateMessage">Update Message</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['updateMessage']),
    updateMessage() {
      this.updateMessage('New Message from Component A');
    },
  },
};
</script>

// ComponentB.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
  },
};
</script>

6. 使用 ref 和 reactive 进行组件通信

• 在 Composition API 中，可以使用 ref 和 reactive 来创建响应式数据，并通过 provide 和 inject 在组件之间共享。

示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from Parent');
    provide('message', message);

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

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  setup() {
    const message = inject('message');
    return { message };
  },
};
</script>

总结

Vue 3 提供了多种组件通信的方式，开发者可以根据具体的需求和场景选择合适的方式：

• 父子组件通信：使用 props 和自定义事件。
• 子父组件通信：使用自定义事件。
• 兄弟组件通信：使用事件总线或 Vuex。
• 跨层级组件通信：使用 provide 和 inject。
• 全局状态管理：使用 Vuex。

这些通信方式可以灵活组合使用，以满足不同场景下的需求。