vue3子传父v-model辅助值传递的步骤
作者：前端烨
这篇文章主要介绍了vue3子传父v-model辅助值传递的步骤,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
title: 子组件向父组件传值
date: 2025-04-27 19:11:09
tags: vue3 vue3子传父——v-model辅助值传递
一、子组件发出
1.步骤一创建emit对象
这个对象使用的是defineEmits进行的创建，emit的中文意思又叫发出，你就把他当成一个发出数据的函数方法来用。
const emit = defineEmits(['update:要传递的对象1','update:要传递的对象2']); const emit = defineEmits(['update:selectSummary']);
**注意：**要写’update:'的原因是这是vue3的一种约定方式，你可以不这么写，但是一旦父组件调用你的方式涉及到了v-model,这种情况下你必须写’update：’这种形式，要不然父组件找不到你传出来的数据。
2.子组件使用emit对象
一般来说会写一个监听函数或者计算函数，来监听想向外传递的数据，以达到子组件的数据一改变就传递的目的。但方式多样看自己的需求写相关的函数，适当时机触发就可以。
// 监听选择的对象数组，滤出想要的数据
watch(selection, () => {
let arr = selection.value.map((item) => { //处理数据
return item.content;
});
emit('update:selectSummary', arr);//发出处理好的数据
});二、父组件接受
使用v-model接收对象。在父组件中使用v-model来进行对象的接收。这是一种约定
v-model:名字=‘父组件对象’，
emit(‘update:名字‘,子组件对象)
<chird v-model:selectSummary="selectSummary" /> // 可以写一样的名字 <chird v-model:selectSummary="summary" /> // 也可以写不一样的名字
注意：
v-model实际上只是一种双向绑定简写方法
<ChildComponent v-model:selectSummary="summary" />
实际写法
<ChildComponent :selectSummary="summary" // summary将值传递给子组件的selectSummary对应的对象 @update:selectSummary="(newValue) => summary = newValue" //更新函数，值给summary />
所以可以直接写 @update:selectSummary=‘handleFunction’
handleFunction是函数名自带参数的
let handleFunction = (item)=>{
log(item);//这个就是子组件传来的数据
}到此这篇关于vue3子传父v-model辅助值传递的步骤的文章就介绍到这了,更多相关vue v-model传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！