vue子组件向父组件传值的方法
1.使用v-model
父组件使用v-model属性向子组件传值
1 | < cmbtpop v-model="show" :name="entity.name" ></ cmbtpop > |
子组件使用value属性接受参数(当属性名称value被占用时可以使用model属性修改接受v-model参数的属性名称,具体可参考model的api)
然后使用$emit方法更新父组件v-model参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | < div :show="newValue" @click="changeValue" >{{name}}</ div > export default { name: 'cmbtpop', data() { return { newValue : this.value,//使用newValue 控制子组件 }; }, props: { value:{ type:Boolean, default: false } , name: String }, watch:{ value:function(){ this.newValue = this.value;//父组件的show值改变时重新控制子组件 } }, methods:{ changeValue(){ this.newValue = !this.newValue; this.$emit('input', this.newValue) // 父组件中的show会被更改成newValue值 } } } |
2.使用同步后缀sync
在父组件的传参属后加入.sync标明该属性同步
在子组件中使用$emit方法更新父组件同步属性
<cmbtpop show.sync="show"></cmbtpop> //子组件 export default { props: { show: { type: Boolean, default: false } }, methods:{ changeValue(){
1 2 3 | this.newValue = !this.newValue; this.$emit('update:show', this.newValue) // 父组件中的show会被更改成newValue值 } |
} }
称
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库