一次搞清Vue3中组件通讯的全部方式

// 父组件
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
const parentMessage = 'Hello from Parent';
</script>

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

<script setup>
defineProps(['message']);
</script>

// 父组件
<template>
  <ChildComponent @update-message="updateMessage" />
</template>

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

function updateMessage(newMessage) {
  console.log(newMessage);
}
</script>

// 子组件
<template>
  <button @click="sendUpdate">Send Update</button>
</template>

<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['update-message']);

function sendUpdate() {
  emit('update-message', 'Hello from Child');
}
</script>

// 父组件
<template>
  <SiblingA @share-data="handleShareData" />
  <SiblingB :sharedData="sharedData" />
</template>

<script setup>
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

const sharedData = ref(null);

function handleShareData(data) {
  sharedData.value = data;
}
</script>

// 父组件
<template>
  <ChildComponent />
</template>

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

provide('parentMessage', 'Hello from Parent');
</script>

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

<script setup>
import { inject } from 'vue';
const message = inject('parentMessage');
</script>

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

export default createStore({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
  },
});


// 组件中使用 Vuex
<template>
  <div>
    <p>计数器: {{ counter }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 使用计算属性获取状态
const counter = computed(() => store.state.counter);

// 定义方法以提交mutation
const increment = () => {
  store.commit('increment');
};
</script>

import { createApp } from 'vue';

const eventBus = createApp({}).config.globalProperties.$bus;

eventBus.$on('some-event', (data) => {
  // 处理事件
});

// 父组件
<template>
  <ChildComponent ref="childRef" />
</template>

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

const childRef = ref();

function callChildMethod() {
  childRef.value.childMethod();
}
</script>

# 使用 pnpm 推荐
pnpm add mitt
# 使用 npm
npm install mitt
# 使用 yarn
yarn add mitt

// src/utils/eventBus.js
import mitt from 'mitt'

// 创建一个事件总线实例
const emitter = mitt()

export default emitter

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

<script setup>
import eventBus from '@/utils/eventBus'

function sendMessage() {
  eventBus.emit('messageSent', 'Hello from Sender')
}
</script>

<template>
  <div>{{ lastMessage }}</div>
</template>

<script setup>
import eventBus from '@/utils/eventBus'

const lastMessage = ref('')

// 监听事件
eventBus.on('messageSent', (message) => {
  lastMessage.value = message
})

// 清理函数，确保卸载时移除事件监听器
onBeforeUnmount(() => {
  eventBus.off('messageSent')
})
</script>

# 使用 pnpm 推荐
pnpm add pinia
# 使用 npm
npm install pinia
# 使用 yarn
yarn add pinia

// src/stores/index.js
import { defineStore } from 'pinia'

// 定义一个 store
export const useMainStore = defineStore('main', {
  state: () => ({
    message: 'Hello from Pinia'
  }),

  actions: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
})

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { useMainStore } from './stores/index'

const app = createApp(App)

// 创建 Pinia 实例
const pinia = createPinia()

// 使用 Pinia
app.use(pinia)

// 挂载应用
app.mount('#app')

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

<script setup>
import { useMainStore } from '@/stores/index'

const mainStore = useMainStore()

function sendMessage() {
  mainStore.updateMessage('Hello from Sender')
}
</script>

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { useMainStore } from '@/stores/index'

const mainStore = useMainStore()
const message = computed(() => mainStore.message)
</script>

// src/hooks/useCounter.js
import { ref, onMounted } from 'vue';

export function useCounter(initialValue) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  return { count, increment };
}

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
import { useCounter } from '@/hooks/useCounter';

const { count, increment } = useCounter(0);
</script>