vue3子传父v-model辅助值传递的步骤
更新时间：2025年05月08日 14:33:49 作者：前端烨
这篇文章主要介绍了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传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
深入理解vue.js中$watch的oldvalue与newValue
这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料，文中通过示例代码介绍的非常详细，并且介绍了关于watch的其他测试，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-08-08
这篇文章主要介绍了如何利用vite快速搭建vue3项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家分享的是 Vue中props用法介绍， 在Vue中通过props,可以将原本孤立的组件串联起来，也就是可以子组件可以接收父组件传递过来的data，下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下2021-11-11
在Vue模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install（或 yarn add）安装包,这篇文章主要介绍了Vue3中如何使用SCSS编写样式,需要的朋友可以参考下2023-12-12
vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为
这篇文章主要介绍了vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为,其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue如何动态给data中添加变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论