在vue3如何实现组件通信？

"# 在 Vue 3 中实现组件通信的方式

在 Vue 3 中，组件通信是构建复杂应用的关键部分。组件之间的通信有多种方式，主要包括以下几种：

1. 父子组件通信

1.1. Props 传递数据

父组件通过props向子组件传递数据：

// ParentComponent.vue
<template>
  <ChildComponent :message=\"parentMessage\" />
</template>

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

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

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

1.2. $emit 触发事件

子组件通过$emit向父组件发送事件：

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

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

// ParentComponent.vue
<template>
  <ChildComponent @messageSent=\"handleMessage\" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg);
    },
  },
};
</script>

2. 兄弟组件通信

2.1. 使用 Event Bus

在 Vue 3 中可以使用mitt库来创建 Event Bus：

npm install mitt

// eventBus.js
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;

// Brother1.vue
<template>
  <button @click=\"sendMessage\">Send Message to Brother 2</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      eventBus.emit('msgToBrother2', 'Hello Brother 2!');
    },
  },
};
</script>

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

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

export default {
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    eventBus.on('msgToBrother2', (msg) => {
      this.message = msg;
    });
  },
  beforeUnmount() {
    eventBus.off('msgToBrother2'); // 清理事件
  },
};
</script>

3. 使用 Vuex 管理状态

对于大型应用，使用 Vuex 来管理全局状态是一个更好的选择：

npm install vuex@next

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

export const store = createStore({
  state() {
    return {
      message: '',
    };
  },
  mutations: {
    setMessage(state, msg) {
      state.message = msg;
    },
  },
});

// ComponentA.vue
<template>
  <input v-model=\"newMessage\" @input=\"updateMessage\" />
</template>

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

export default {
  data() {
    return {
      newMessage: '',
    };
  },
  methods: {
    ...mapMutations(['setMessage']),
    updateMessage() {
      this.setMessage(this.newMessage);
    },
  },
};
</script>

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

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const message = computed(() => store.state.message);
    return { message };
  },
};
</script>

4. Provide / Inject

在 Vue 3 中，provide 和 inject 允许祖先组件向后代组件提供数据：

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

<script>
export default {
  provide() {
    return {
      sharedData: 'Hello from Parent!',
    };
  },
};
</script>

// ChildComponent.vue
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  inject: ['sharedData'],
};
</script>

结论

在 Vue 3 中实现组件通信的方式多样，选择合适的方式可以提高代码的可维护性和可读性。根据应用的复杂程度和需求，可以灵活使用props、$emit、Event Bus、Vuex或provide/inject来实现组件之间的有效通信。"