vue3.0中的组件通信方式

1、Props（父组件向子组件传递数据）

父组件：

<template>
  <div>
    <ChildComponent :childData="parentData" />
  </div>
</template>

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

const parentData = ref('父组件的数据');
</script>

子组件：

<template>
  <div>{{ childData }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  childData: String
});
</script>

2、Custom Events（子组件向父组件传递数据）

子组件：

<template>
  <button @click="notifyParent">通知父组件</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['update:parentData']);

function notifyParent() {
  emits('update:parentData', '这是来自子组件的数据');
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @update:parentData="handleParentDataUpdate" />
    <p>父组件接收到的数据：{{ parentReceivedData }}</p>
  </div>
</template>

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

const parentReceivedData = ref('');

function handleParentDataUpdate(data) {
  parentReceivedData.value = data;
}
</script>

3 、Provide / Inject（跨组件传递数据）

祖先组件：

<template>
  <div>
    <DescendantComponent />
  </div>
</template>

<script setup>
import { provide } from 'vue';

provide('ancestorData', '这是来自祖先组件的数据');
</script>

后代组件：

<template>
  <div>{{ ancestorData }}</div>
</template>

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

const ancestorData = inject('ancestorData', '默认值');
</script>

4、Refs（父组件访问子组件实例）

父组件：

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="accessChildMethod">调用子组件方法</button>
  </div>
</template>

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

const childRef = ref(null);

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

子组件（ChildComponent.vue）：

<script setup>
import { defineExpose } from 'vue';

function childMethod() {
  console.log('子组件方法被调用');
}

defineExpose({
  childMethod
});
</script>

5 、Vuex / Pinia（状态管理）

Vuex 和 Pinia 是 Vue 应用的状态管理模式和库，用于集中管理所有组件的共享状态。它们提供了全局状态存储和跨组件访问状态的能力。

6、 使用v-model进行父子组件间的双向数据绑定

父组件：

<template>
  <div>
    <ChildComponent v-model:childData="parentData" />
    <p>父组件的数据：{{ parentData }}</p>
  </div>
</template>

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

const parentData = ref('初始数据');
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <input v-model="localData" @input="updateValue" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue']);

const localData = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

function updateValue(event) {
 	console.log(event,"更新后的数据");
}
</script>

7、使用mitt或EventBus进行跨组件通信

mitt是一个轻量级的事件发射/订阅库，它可以用作Vue应用中的全局事件总线，实现跨组件通信。虽然Vue 3没有内置EventBus，但你可以通过安装mitt或自己实现一个简单的EventBus来达到相同的效果。

使用方式

npm install mitt

在项目中创建一个事件总线文件（如eventBus.js）：

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

在组件中使用：

// 发送事件的组件
<script setup>
import emitter from './eventBus';

function sendMessage() {
  emitter.emit('message', 'Hello from anywhere!');
}
</script>

// 监听事件的组件
<script setup>
import { onMounted, onUnmounted } from 'vue';
import emitter from './eventBus';

onMounted(() => {
  emitter.on('message', (msg) => {
    console.log(msg); // 输出: Hello from anywhere!
  });
});

onUnmounted(() => {
  emitter.off('message'); // 清理事件监听，避免内存泄漏
});
</script>