VUE3中的组件通信

工作中使用组件之间传值在此记录

 

目录
VUE3中的组件通信六种方法介绍与基本使用
一、父传子(props)
二、 Emits 传值（子组件向父组件传值）
三、v-model 双向绑定
四、 provide/inject（跨层级组件传值）
五、事件总线（mitt 库）第三方库
六、 Vuex 或 Pinia（状态管理库）
VUE3中的组件通信六种方法介绍与基本使用
一、父传子(props)
Props 是最常用的父组件向子组件传递数据的方式。父组件通过属性绑定将数据传递给子组件，子组件使用 defineProps 来接收数据。

父组件

<template>
<ChildComponent :list="list" />
</template>

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

const list= ref([
{name:“我是测试数据”}
]);
</script>
子组件

```bash
<template>
<p>{{ list[0].name}}</p>
</template>

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

const props = defineProps({
list: {
type: Arrary,
default: []
}
});
</script>```
二、 Emits 传值（子组件向父组件传值）
子组件可以通过 defineEmits 定义自定义事件，使用 emit 触发事件并传递数据给父组件。多用于表单提交等

父组件

<template>
<ChildComponent @customEvent="handleChildEvent" />
</template>

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

const handleChildEvent = (data) => {
console.log('Received data from child:', data);
};
</script>
子组件
1.通过点击触发emit传值

<template>
<button @click="sendDataToParent">Send Data</button>
</template>

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

const emits = defineEmits(['customEvent']);
//const emits = defineEmits('customEvent'); 这种写法也可以 但是必须defineEmits先定义函数

const sendDataToParent = () => {
emits('customEvent', 'Data from child');
};
// emits（父组件函数名，参数）
</script>

三、v-model 双向绑定
v-model 是一种简化的语法糖，用于实现父组件和子组件之间的双向数据绑定。

父组件

<template>
<ChildComponent v-model="parentValue" />
<p>{{ parentValue }}</p>
</template>

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

const parentValue = ref('Initial value');
</script>

子组件

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

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

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

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

const localValue = ref(props.modelValue);

const updateValue = () => {
emits('update:modelValue', localValue.value);
};
</script>

、、、、、、、、、、、、、、、
或者
<template>
<div class="childPage">
<button @click="updateA">按钮</button>
</div>
</template>

<script lang="ts" setup>
import { defineModel } from "vue";

const parentValue = defineModel({
type: Number,
default: 0,
});

const updateA = () => {
parentValue value += 1;
};
</script>

四、 provide/inject（跨层级组件传值）
此种方式，可以用于替代 window.location.reload 刷新页面以此规避页面闪白问题
provide 和 inject 用于在祖先组件和后代组件之间进行跨层级的数据传递，不需要一层一层地通过 Props 传递。 不管嵌套的再深都可以使用，但要注意，只适用父子组件，无嵌套关系的不能使用

例如：
父组件

const isRouterJump= ref(true); // 是否路由跳转

const reload = () => {
isRouterJump.value = false;
nextTick(() => {
isRouterJump.value = true
})
}
provide("reload", reload);
<template>
<ConfigGlobal >
<RouterView v-if="isRouterJump"/>
<routerSearch />
</ConfigGlobal>
</template>

子组件

<template>
<p>{{ injectedData }}</p>
</template>

<script setup>
import { inject } from 'vue';
const reload = inject<any>("reload");
reload ()
</script>

五、事件总线（mitt 库）第三方库
篇幅有限 在这里只介绍用法
使用第三方库 mitt 可以创建一个全局的事件总线，实现任意组件之间的通信。

事件总线
创建 useEmitt.js

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

发送事件的组件示例：

<template>
<button @click="sendEvent">Send Event</button>
</template>

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

const sendEvent = () => {
emitter.emit('customEvent', 'Data from sender');
};
</script>

接收事件的组件示例：

<template>
<!-- 组件模板 -->
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import emitter from './eventBus';

const handleEvent = (data) => {
console.log('Received data:', data);
};

onMounted(() => {
emitter.on('customEvent', handleEvent);
});

onBeforeUnmount(() => {
emitter.off('customEvent', handleEvent);
});
</script>


六、 Vuex 或 Pinia（状态管理库）
Pinia 示例：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});

使用 Store 的组件示例：

<template>
<p>{{ counterStore.count }}</p>
<button @click="counterStore.increment">Increment</button>
</template>

<script setup>
import { useCounterStore } from './store';

const counterStore = useCounterStore();
</script>