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

  1. Vue.component("base-input", {
  2. model: {
  3. prop: "val",
  4. event: "input"
  5. },
  6. props: {
  7. val: [String, Number]
  8. },
  9. template: `
  10. <input
  11. type="text"
  12. v-bind:value="val"
  13. @input="$emit('input', $event.target.value)"
  14. >
  15. `
  16. });
    父组件使用
    <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. ESP32的NVS使用指南

    NVS总的来说,就是非易失性存储,类似MCU EEPROM,但实际上调用ESP32这些函数,数据是存储在FLASH中的. 它的管理方式类似数据库的表,在NVS里面可以存储很多个不同的表,每个表下面有不 ...

  2. python集合和eval的使用

    python集合和eval的使用 创建集合 使用工厂方法 set()和 frozenset(): >>> s = set('cheeseshop') >>> s s ...

  3. 魔兽争霸RPG地图开发速成教程

    魔兽争霸RPG地图开发速成教程 1 打开WE编辑器 下载地址  http://rpg.dz.blizzard.cn/authors-home/editor-download 然后新建地图 2  打开工 ...

  4. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

  5. [认证 & 授权] 3. 基于OAuth2的认证(译)

    OAuth 2.0 规范定义了一个授权(delegation)协议,对于使用Web的应用程序和API在网络上传递授权决策非常有用.OAuth被用在各钟各样的应用程序中,包括提供用户认证的机制.这导致许 ...

  6. CF977D Divide by three, multiply by two

    题目链接 我同学在旁边做者道题,我也看了一下 真的好水难 一看这道题,直接搜索 剪枝是不可能剪枝的一辈子不可能 Code #include <cstdio> #include <io ...

  7. UML简单介绍—类图这么看就懂了

    如何看懂类图 1.类图简介 描述类的内部结构和类与类之间的关系,是一种静态结构图. 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关 ...

  8. Jsf中进度条的用法

    Jsf中进度条的用法 前端页面 <!-- 进度条 --> <p:progressBar widgetVar="pbAjax" ajax="true&qu ...

  9. Redis Python(二)

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.NoSQL(Not only SQL)1.泛指非关系数据库2.不支持SQL语法3.存储结构与传统的关系型数据库 ...

  10. 使用 Flutter 开发 Mac 桌面应用

    Flutter 可以开发 Mac,Linux,Windows 桌面,但是对于平台目前只能打对于的包,以及调试本平台的包. 切换到 master 分支 首先必须切换到 master 分支.我之前在 de ...