Vue3实现组件通信的14种方式详解与实战

<!-- 父组件 Parent.vue -->
<template>
  <Child :message="parentMsg" />
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const parentMsg = ref('Hello from Parent');
</script>

<!-- 子组件 Child.vue -->
<template>
  <div>父组件传递的props: {{ message }}</div>
</template>
<script setup>
const props = defineProps({
  message: String
});
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendData">发送数据</button>
</template>
<script setup>
const emit = defineEmits(['update']);
function sendData() {
  emit('update', 'Data from Child');
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child @update="handleUpdate" />
</template>
<script setup>
function handleUpdate(data) {
  console.log('接收到子组件数据:', data);
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child :customAttr="123" />
</template>

<!-- 子组件 Child.vue -->
<template>
  <div v-attrs="$attrs"></div>
</template>
<script setup>
import { useAttrs } from 'vue';
const attrs = useAttrs();
console.log(attrs.customAttr); // 输出 123
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);
function callChildMethod() {
  childRef.value?.childMethod();
}
</script>

<!-- 子组件 Child.vue -->
<script setup>
function childMethod() {
  console.log('子组件方法被调用');
}
defineExpose({ childMethod });
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model="value" />
</template>
<script setup>
import { ref } from 'vue';
const value = ref('初始值');
</script>

<!-- 子组件 Child.vue -->
<template>
  <input :value="modelValue" @input="updateValue" />
</template>
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
function updateValue(e) {
  emit('update:modelValue', e.target.value);
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <BrotherA @data-change="handleDataChange" />
  <BrotherB :shared-data="sharedData" />
</template>
<script setup>
import { ref } from 'vue';
const sharedData = ref('');
function handleDataChange(data) {
  sharedData.value = data;
}
</script>

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

// 组件A
<script setup>
import { emitter } from './eventBus.js';
function sendData() {
  emitter.emit('brother-event', { id: 1 });
}
</script>

// 组件B
<script setup>
import { emitter } from './eventBus.js';
emitter.on('brother-event', (data) => {
  console.log('接收到数据:', data);
});
</script>

// store/counter.js (Pinia)
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } }
});

// 组件A
<script setup>
import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
store.increment();
</script>

// 组件B
<script setup>
import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
console.log(store.count);
</script>

<!-- 父组件 Parent.vue -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme);
</script>

<!-- 子组件 Child.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme');
console.log('当前主题:', theme.value);
</script>

// 存储数据
localStorage.setItem('user', JSON.stringify({ name: '豆豆' }));

// 读取数据
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 输出 豆豆

12. 全局 window 对象
适用场景：临时跨组件通信（慎用）

// constants.js
export const API_URL = 'https://api.example.com';

// 组件中使用
import { API_URL } from '@/constants';
console.log(API_URL); // 输出 https://api.example.com

<!-- 父组件 Parent.vue -->
<template>
  <Child>
    <template #default="{ config }">
      <div :style="config">{{ config.title }}</div>
    </template>
  </Child>
</template>

<!-- 子组件 Child.vue -->
<script setup>
import { reactive } from 'vue';
const config = reactive({ title: 'Slot Injected Config' });
</script>