Vue3中父子组件间传参通信有哪四种方式？

本文共计2980个文字，预计阅读时间需要12分钟。

目录+前言+一、父传子+defineProps+二、子传父+defineEmits+三、子组件暴露属性给父组件+defineExpose+四、依赖注入Provide / Inject+参考+总结+前言+本文主要记录Vue3在setup语法糖下，父子组件之间的通信方式。

目录

• 前言
• 一、父传子 defineProps
• 二、子传父 defineEmits
• 三、子组件暴露属性给父组件 defineExpose
• 四、依赖注入Provide / Inject
• 参考
• 总结

前言

本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式

Vue3+TypeScript

一、父传子 defineProps

父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值，而后传给子组件；子组件则通过defineProps接收使用。