前提:题主之前只是随意的封装,项目统一ui,然后只实现了父组件拿子组件值,没有实现父组件修改子组件的值,仔细看了文档才知道用model的作用,直接上代码

Vue.component("base-input", {
model: {
prop: "val",
event: "input"
},
props: {
val: [String, Number]
},
template: `
<input
type="text"
v-bind:value="val"
@input="$emit('input', $event.target.value)"
>
`
});
父组件使用
<base-input v-model=""></base-input>
原因系解:等作者补坑

vue的类element的input类型组件封装的更多相关文章

  1. Vue.js(24)之 弹窗组件封装

    同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade&qu ...

  2. 【Vue 2.X】基于input[type='number']封装parseFloat、parseInt-自定义指令系列(一)

    一.parseFloat 效果:限制负值输入,且输入值不为空时自动保留两位小数,等同于js的parseFloat(value).toFixed(2) 使用:与v-model配合使用,v-parseFl ...

  3. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  4. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  5. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  6. 在vue中使用Element的message组件

    在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...

  7. Vue + Element UI 实现权限管理系统 (功能组件封装)

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

  8. Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

  9. vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中 ...

随机推荐

  1. docker安装redis 5.0.7并挂载外部配置和数据

    环境 CentOS Linux release 7.7.1908 (Core) 拉取redis 5.0.7 镜像 docker pull redis:5.0.7 创建挂载目录 mkdir -p /ho ...

  2. (办公)记事本_Linux帮助命令

    参考:http://www.gulixueyuan.com/course/300/task/7086/show# 帮助命令: .man命令 1.1.man命令是Linux下的帮助指令,通过man指令可 ...

  3. STM32的Keil找不到想要flash的解决方法

    STM32的Keil找不到想要flash的解决方法:https://blog.csdn.net/qq_38376586/article/details/79582020

  4. 【Cef编译】 CefSharp编译失败,检测到“RuntimeLibrary”的不匹配项: 值“MT_StaticRelease”不匹配值“MD_DynamicRelease”

    编译CefSharp生成后一个libcef_dll_wrapper.lib时,供CefSharp使用.结果CefSharp编译的时候报错.遇到以下异常: libcef_dll_wrapper.lib( ...

  5. IDEA项目更改项目名

    点击File,如图:

  6. QT程序自启动

    故事背景:最近涉及到客户端更新自启动的一个问题,客户端检测到自己要更新,弹出一个更新界面,然后退出旧版本,启动新版本 技术调研:QProcess 直接上代码吧 qApp->quit(); QPr ...

  7. 编译原理之DFA最小化,语法分析初步

    1.将DFA最小化: 状态转换图: 识别语言:b*ac*(da)*bb* 2.构造以下文法相应的最小的DFA S→ 0A|1B A→ 1S|1 B→0S|0 (1)正规式: S -> 0(1S+ ...

  8. 有抱负的 DevOps 和 SRE 工程师必读好书清单 | 文末有福利!

    原文地址:https://medium.com/faun/10-great-books-for-aspiring-devops-sre-engineers-76536c7c4909 原文作者:Ayme ...

  9. [转载]——Full UNDO Tablespace In 10gR2 and above (文档 ID 413732.1)

    最近遇到了这个案例,官方文档已有详尽的分析.介绍,特转载在此,方便以后查看! Full UNDO Tablespace In 10gR2 and above (SQL> select count ...

  10. Linux下的find命令2

    :续linux下的find命令 Linux/Unix下非常有用的find命令的用法 功能简述:find(查找)主要沿着文件层次(目录)结构依次向下遍历,匹配符合条件的文件,可以附带执行相应的操作选项, ...