Elementui el-input 实现自定义 v-model

news/2024/10/30 13:25:17/

Vue 本身支持自定义组件实现 v-model ,但 el-input 作为 Elementui 的自定义组件也已经实现 v-model ,那么如果在自定义组件中使用 el-input ,但自定义组件也想实现 v-model ,应该怎么做?

错误的方式

  1. Vue 中让自定义组件实现 v-model 可参考 Vue自定义v-model
  2. 但如果按照这种方式想要让以下代码实现 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>

正确的方式

  1. 如果在自定义组件中,既想使用 el-input 的样式和规则,又想让组件本身实现自定义 v-model
  2. 那么就应该像如下代码一样,不直接使用 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>

http://www.ppmy.cn/news/154624.html

相关文章

RISC-V 麻雀 D1s Buildroot 基本笔录

文章目录 前言麻雀Buildroot开机日志系统探索OpenSBIQEMU Buildroot RISCV参考 前言 RISC-V, BSD许可证之下自由使用的CPU设计, 最早是2010年加州大学伯克利分校的几个教授设计的, 几乎可以为所欲为的许可协议, RV32主要用于MCU, RV64主要用于SOC, 还有RV128等. 现在很多国产芯…

【保姆级教程】全志V853开发板硬件指南

开发板硬件指南 本章节将介绍V853开发板上各模块的基础使用方法。 V853开发板集成了LED、WiFi、蓝牙、以太网、音频、屏幕、USB、TF卡等模块。本章节将对这些模块进行简单的操作介绍&#xff0c;方便开发者快速上手了解开发板。 *注&#xff1a; 本文中 rootTinaLinux:~# 开…

Start Timeline Service V2.0 Reader开启失败

原因和解决办法&#xff1a; yarn2需要的内存大小至少是4Gb&#xff0c;报错的原因就是内存不够。 如果是用的vmware&#xff0c;将装yarn服务的主机内存大小调到6G就可以解决了。 报错&#xff1a; Memory: 4k page, physical 3863576k(157772k free), swap 3145724k(16806…

z370 raid linux,Intel也有黑科技:VROC(NVMe RAID)详解

原标题:Intel也有黑科技:VROC(NVMe RAID)详解 作者 白丁 给SSD Fans原创投稿技术或市场文章,拿>=100元稿费。 原文链接:https://www.pcper.com/reviews/Storage/Intel-VROC-Tested-X299-VROC-vs-Z270-RST-Quad-Optane-vs-Quad-960-PRO 这几个月以来,我们已经听说了英特尔…

Oracle v$SQLTEXT

SQL> desc v$sqltext; Name Null? Type ADDRESS RAW(8) HASH_VALUE NUMBER SQL_ID VARCHAR2(13) COMMAND_TYPE NUMBER PIECE NUMBER SQL_TEXT VARCHAR2(64) 但v$sqltext中存储的比较简单&#xff0c;没有该语句的统计信息&#xff0c;比如…

dell12v18a怎么改_几招教你改DELL 12V/18A适配器电压和保护方法

赞助商链接 最近从网上购了6只坏电源玩玩,连邮费一共85元,6个电源是三个型号5个版本,分别为ADP-220ABB的有A00和A02二个版;D220P-01的全部是A02版;ZVC220HD12S1的有A00和A05二个版本,这下有得玩了。 [attachment=9700124] 到手后就全部拆开看内脏,首先是6个电源大部份泡…

dell12v18a怎么改_几招教你改DELL12V18A电压和保护方法

最近从网上购了6只坏电源玩玩,连邮费一共85元,6个电源是三个型号5个版本,分别为ADP-220ABB的有A00和A02二个版;D220P-01的全部是A02版;ZVC220HD12S1的有A00和A05二个版本,这下有得玩了。 图片:6611.jpg 到手后就全部拆开看内脏,首先是6个电源大部份泡过澡,有的还相当严…

签名板esp370 html,ESP370560_ocx_v4.1.0.8_20170705

文件名大小更新时间 ESP370&560_ocx_v4.1.0.8_20170705\Demo.html69602017-07-05 ESP370&560_ocx_v4.1.0.8_20170705\HWPenSignDemoT\HWPenSignDemoT\bin\Release\AxInterop.HWPenSignLib.dll76802014-11-02 ESP370&560_ocx_v4.1.0.8_20170705\HWPenSignDemoT\HWPe…