vue3中父组件向子组件传递参数核心方案是父组件用 v-bind 绑定数据子组件用 defineProps 接收数据组合式 API 语法。即v-bind 传 父 defineProps 收子。步骤1.父组件在使用子组件的标签上通过 :属性名“数据” 绑定要传递的数据Child :数据名“变量”/2.子组件使用 definePropsVue3 组合式 API 内置函数无需导入声明接收的参数 const props defineProps({数据名: 类型})3.子组件使用直接通过变量名使用父组件传递过来的数据props.数据名 或模板中直接写 数据名示例1.父组件parent.vuetemplatedivclassparenth2我是父组件/h2!--核心向子组件传参--!--1.传递普通字符串--!--2.传递变量/对象/数组必须加:--Child:msgparentMsg:useruserInfo:listhobbyList//div/templatescript setup// 引入子组件Vue3 自动注册无需componentsimportChildfrom./Child.vue// 父组件的数据constparentMsg来自父组件的消息constuserInfo{name:张三,age:20}consthobbyList[吃饭,睡觉,打代码]/script2.子组件child.vuetemplatedivclasschildh3我是子组件/h3!--直接使用接收的参数--p字符串{{msg}}/pp对象{{user.name}}-{{user.age}}/pp数组{{list.join(、)}}/p/div/templatescript setup// 核心defineProps 接收父组件传递的参数// 写法1简单接收不校验类型// const props defineProps([msg, user, list])// 写法2推荐带类型校验 默认值更规范constpropsdefineProps({// 字符串类型必传msg:{type:String,required:true},// 对象类型user:{type:Object,default:()({})// 默认空对象},// 数组类型list:{type:Array,default:()[]// 默认空数组}})// 在 JS 中使用传递的数据props.xxxconsole.log(父组件传递的msg,props.msg)console.log(父组件传递的user,props.user.name)/script