<input v-model="something">
v-model指令其实是下面的语法糖包装而成:
<input :value="something" @:input="something = $event.target.value">
在一个组件上使用 v-model 时,会简化为:
<custom-input :value="something" @input="value => { something = value }"> </custom-input>
因此,对于一个带有 v-model
的组件,它应该如下:
- 接收一个
value
prop - 触发
input
事件,并传入新值
利用 $emit 触发 input 事件:
this.$emit('input', value);
组件1:
Vue.component('my-component', { template: `<div> <input type="text" :value="currentValue" @input="handleInput"/> </div>`, computed:{ currentValue:function () { return this.value } }, props: ['value'], //接收一个 value prop methods: { handleInput(event) { var value = event.target.value; this.$emit('input', value); //触发 input 事件,并传入新值 } } });
上面是将prop属性绑定到data里,以便修改 prop 数据(Vue不允许直接修改prop属性的值)#查看原理#
组件2:
Vue.component("my-counter", { template: `<div> <h1>{{value}}</h1> <button @click="plus">+</button> <button @click="minu">-</button> </div>`, props: { value: Number //接收一个 value prop }, data: function() { return { val: this.value } }, methods: { plus() { this.val = this.val + 1 this.$emit('input', this.val) //触发 input 事件,并传入新值 }, minu() { if(this.val>0){ this.val = this.val-1 this.$emit('input', this.val) //触发 input 事件,并传入新值 } } } });
查看在线例子
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· 我干了两个月的大项目,开源了!
· 千万级的大表,如何做性能调优?
· 盘点!HelloGitHub 年度热门开源项目
· Phi小模型开发教程:用C#开发本地部署AI聊天工具,只需CPU,不需要GPU,3G内存就可以运行,
· 你所不知道的 C/C++ 宏知识——基于《C/C++ 宏编程的艺术》