当前位置: 首页 > java >正文

Vue3 组件之间传值

在 Vue3 中,组件之间的数据传递主要有以下几种方式,适用于不同的场景:


一、父组件向子组件传值:props

1. 子组件定义 props
<!-- ChildComponent.vue -->
<script setup>
// 组合式 API(推荐)
const props = defineProps({title: {type: String,default: '默认标题'},count: {type: Number,required: true}
});
</script><template><div>{{ title }} - {{ count }}</div>
</template>
<!-- 选项式 API -->
<script>
export default {props: {title: String,count: {type: Number,required: true}}
}
</script>
2. 父组件传递数据
<template><ChildComponent :title="'Hello Vue3'" :count="42"/>
</template>

二、子组件向父组件传值:emit 事件

1. 子组件触发事件
<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件function increment() {emit('updateCount', 10); // 触发事件并传递数据
}
</script><template><button @click="increment">增加计数</button>
</template>
2. 父组件监听事件
<template><ChildComponent :count="count"@updateCount="count = $event" <!-- 接收子组件传递的值 -->/>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

三、双向绑定:v-model

1. 子组件支持 v-model
<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);function updateValue(newValue) {emit('update:modelValue', newValue);
}
</script><template><input :value="modelValue" @input="updateValue($event.target.value)">
</template>
2. 父组件使用 v-model
<template><ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template><script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

四、跨层级传值:provide / inject

1. 祖先组件提供数据
<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>
2. 后代组件注入数据
<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme'); // 注入数据
</script><template><div :class="theme">当前主题:{{ theme }}</div>
</template>

五、通过 Context 共享数据(如 Pinia 状态管理)

1. 安装 Pinia
npm install pinia
2. 创建 Store
// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});
3. 组件中使用 Store
<template><div>Count: {{ counterStore.count }}</div><button @click="counterStore.increment()">+1</button>
</template><script setup>
import { useCounterStore } from '@/stores/counter';const counterStore = useCounterStore();
</script>

总结:不同场景的传值方式

场景方法适用性
父子组件直接通信props + emit父子层级明确,数据流单向
表单输入双向绑定v-model表单类组件(如输入框、下拉框)
跨层级组件通信provide / inject深层次嵌套组件(如全局配置、主题)
复杂应用状态共享Pinia / Vuex多组件共享状态(推荐中大型项目)

推荐实践

  • 优先使用 propsemit 实现父子通信。
  • 简单双向绑定用 v-model,复杂逻辑用事件。
  • 跨层级或全局状态使用 Pinia。
  • 避免过度依赖 provide/inject,可能导致组件耦合。
http://www.xdnf.cn/news/7804.html

相关文章:

  • React深度解析:Hooks体系与Redux Toolkit现代状态管理实践
  • linux 学习之位图(bitmap)数据结构
  • 宝塔安装的 MySQL 无法连接的情况及解决方案
  • StepX-Edit:一个通用图像编辑框架——论文阅读笔记
  • 计算机网络相关面试题
  • 安全可控的AI底座:灯塔大模型应用开发平台全面实现国产信创兼容适配认证
  • 数据被泄露了怎么办?
  • 视觉生成新突破!仅0.5B参数,SimpleAR解锁预训练、SFT、RL全能模式
  • 【MC】红石比较器
  • Spring Boot 项目中 Redis 存储 Session 对象序列化处理
  • 面向未来,遨游推出5G-A智能防爆对讲机等系列终端
  • Qt功能区:Ribbon控件
  • BEVDet
  • opencv_version_win32
  • Leetcode-2 最小偶倍数
  • pikachu靶场 暴力破解
  • 服务器安装xfce桌面环境并通过浏览器操控
  • SpringBoot外部化配置
  • NIFI的处理器:ExecuteGroovyScript 2.4.0
  • 第14天-Matplotlib实现数据可视化
  • ollama使用gpu运行大模型
  • Xilinx 7Series\UltraScale 在线升级FLASH STARTUPE2和STARTUPE3使用
  • Java 定时任务中Cron 表达式与固定频率调度的区别及使用场景
  • 唯创安全优化纸业车间安全环境:门口盲区预警报警器的应用与成效
  • STL中的Vector(顺序表)
  • RabbitMQ——消息确认
  • NLP学习路线图(三): 微积分(梯度、导数等)
  • 有没有其他影视app可以像群晖video station一样可以被Windows的本地网络驱动器找到
  • 【Vue3】数据的返回和响应式处理(ref reactive)
  • 自建srs实时视频服务器支持RTMP推流和拉流