当前位置：首页 > news >正文

vue3组件间通信方式

news 2026/6/2 13:13:43

一.前言

在 Vue3 项目中组件化是核心思想。随着业务复杂度提升，组件之间不可避免地需要进行数据与行为的通信。合理选择通信方式，不仅能让代码更清晰、可维护性更高，也能显著降低后期重构成本。

本文将系统性地梳理Vue3中常见且实用的组件间通信方式，结合典型使用场景、代码示例及优缺点分析，帮助开发者在实际项目中做出正确选择。

二. 通信

1.父子组件通信（Props / Emits）

1.1 父组件向子组件传值（Props）

父组件通过 props 向子组件传递数据，这是最基础、也是最推荐的单向数据流方式。

<!-- Parent.vue --> <Child :title="pageTitle" /> <!-- Child.vue --> <script setup> const props = defineProps({ title: String }) </script>

1.2 子组件向父组件传值（Emits）

子组件通过 emit 触发事件，将数据回传给父组件。

<!-- Parent.vue --> <Child @update="handleUpdate" /> <!-- Child.vue --> <script setup> const emit = defineEmits(['update']) function handleClick() { emit('update', 'new value') } </script>

2.v-model 语法糖（双向绑定通信）

2.1 默认v-model

<!-- Parent.vue --> <Child v-model="value" /> <!-- Child.vue --> <el-input v-model="innerValue" @change=” handleChange /> <script setup> const props = defineProps({ modelValue: String }) const emit = defineEmits(['update:modelValue']) function handleChange(){ emit("update:modelValue", innerValue); } </script>

2.2 多个v-model

<!-- Parent.vue --> <Child v-model:title="title" v-model:visible="visible" /> <!-- Child.vue --> <script setup> const props = defineProps({ title: String, visible: Boolean }) const emit = defineEmits([ 'update:title', 'update:visible' ]) function changeTitle(newTitle) { emit('update:title', newTitle) } function open() { emit('update:visible', true) } function close() { emit('update:visible', false) } </script>

3.祖先/后代组件通信（Provide/Inject）

// 祖先组件

provide('theme', 'dark')

// 后代组件 <setup>中直接用，其他函数引用这个获取的常量值themeNew ，不能直接引用 //inject('theme')

const themeNew = inject('theme')

注意：如果多个祖先provide('theme', value), 后代inject得到的值为最近祖先provide的值

4.兄弟组件通信

4.1借助父组件中转

兄弟组件之间不直接通信，通过父组件统一管理状态。

<!-- Parent.vue --> <script setup> import { ref } from 'vue' import FilterPanel from './FilterPanel.vue' import ResultTable from './ResultTable.vue' const keyword = ref('') </script> <template> <FilterPanel v-model:keyword="keyword" /> <ResultTable :keyword="keyword" /> </template> <!-- FilterPanel.vue --> <script setup> const props = defineProps({ keyword: String }) const emit = defineEmits(['update:keyword']) function onInput(e) { emit('update:keyword', e.target.value) } </script> <template> <input :value="keyword" @input="onInput" placeholder="请输入关键字" /> </template> <!-- ResultTable.vue --> <script setup> const props = defineProps({ keyword: String }) </script> <template> <div> 当前筛选条件：{{ keyword }} </div> </template>

4.2使用全局状态（如 Pinia）

适用于复杂业务、多个模块共享数据的场景。具体使用详见 5.全局状态管理

5.全局状态管理（Pinia）

store.js 定义Store import { defineStore } from "pinia"; import { ArrangeInfo } from "@/const/commonModelEntity"; // 排列信息store export const useArrangeStore = defineStore("arrange", { state: (): { arrangeData: ArrangeInfo[] } => ({ arrangeData: [], // 排列信息 }), actions: { setArrangeData(data: ArrangeInfo[]) { this.arrangeData = data; }, }, }); // 组件中使用 发送方 <script setup lang="ts"> import { useArrangeStore } from "@/stores/index.ts"; const arrangeStore = useArrangeStore(); function handleSend(){ arrangeStore.setArrangeData(tableData); } </script> // 组件中使用 接收方 <script setup lang="ts"> import { useArrangeStore } from "@/stores/index.ts"; const arrangeStore = useArrangeStore(); function handleRecive(){ console.log(arrangeStore.arrangeData); } </script>

6.ref / expose（父组件直接调用子组件方法）

<!-- Child.vue --> <script setup> defineExpose({ reset }) </script> <!-- Parent.vue --> <Child ref=childRef></Child> <script setup> const childRef = ref() childRef?.value.reset() </script>

7.通信方式对比与选型建议

场景	推荐方式	特点
父->子	props	单向数据流、数据来源清晰、适合展示型、受控组件
子->父	emits	明确的数据回流路径、适合表单或交互组件
子->父	v-model	表单组件、弹窗、抽屉等状态控制组件
跨多层级	provide / inject	跨层级传递数据、避免 props 层层透传、不适合频繁变化的数据（默认非响应式）除非用ref等
全局状态	Pinia	跨页面、跨模块状态共享、登录信息、权限信息、全局配置
调用子方法	ref + expose	表单重置、强制刷新、复用校验等操作