Elementui el-input 实现自定义 v-model
Vue 本身支持自定义组件实现 v-model ,但 el-input 作为 Elementui 的自定义组件也已经实现 v-model ,那么如果在自定义组件中使用 el-input ,但自定义组件也想实现 v-model ,应该怎么做?
错误的方式
- Vue 中让自定义组件实现 v-model 可参考 Vue自定义v-model
- 但如果按照这种方式想要让以下代码实现 v-model ,是不可取的
- 可以用,但每次在页面第一次渲染的时候都没有值,非要手动输入一次,才会触发变化
- 这是因为下面这个 in-player 组件中的 el-input 已经实现了自定义的 v-model ,当 in-player 再次通过同样的方式实现时,就出现了两次 watch 操作
<template> <div class="in-player-panel"> <el-input placeholder="请输入视频vid" v-model="videoId"> <el-button slot="append" @click="changePlayAuth">播放</el-button> </el-input> </div> </template> <script type="text/ecmascript-6"> export default { name: 'in-player', props: { value: { type: String, value: ' ' } }, data () { return { videoId: '' } }, watch: { 'value' (val) { if (val == this.videoId) { return false } this.videoId = val }, 'videoId' (val) { this.$emit('input', val) } } } </script>
正确的方式
- 如果在自定义组件中,既想使用 el-input 的样式和规则,又想让组件本身实现自定义 v-model
- 那么就应该像如下代码一样,不直接使用 el-input 的 v-model 实现,转而使用其
@input
函数
<template> <div class="in-player-panel"> <el-input placeholder="请输入视频vid" :value="value" @input="update"> <el-button slot="append" @click="changePlayAuth">播放</el-button> </el-input> </div> </template> <script type="text/ecmascript-6"> export default { name: 'in-player', props: { value: { type: String, value: ' ' } }, methods: { update (val) { this.$emit('input', val) } } } </script>
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
2017-02-24 CSS如何进行图文并茂布局怎么破
2017-02-24 jquery菜单插件
2017-02-24 CSS在项目中常用的属性总结
2017-02-24 CSS3动画常用demo