Vue中封装input组件的实例详解


Posted in Javascript onOctober 17, 2017

Vue中封装input组件

最近有点忙不过来 脱了很久,没有更新 抱歉。今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数

我的项目中的UI图是这样的

Vue中封装input组件的实例详解

代码如下

子组件的模板设置

<template>
 <div class="completion-input-box">
  <span class="input-box-name">{{text}}</span>
  <input 
  type="text" 
  ref="input"
  :value="value"  
  @input="$emit('input', $event.target.value)"
  >
 </div>
</template>
<script>
export default {
 name: 'inputlsit',
 props: ['text', 'value'],
}
</script>

父组件模板

<template>
 <div class="completion-input-box">
  <FromList :text="'创业项目名称'" v-model="projectN"></FromList>
  <FromList :text="'所属公司名称'" v-model="companyN"></FromList>
  <FromList :text="'所属投资机构名称'" v-model="mechanismN"></FromList>
 </div>
</template>
<script>
import FromList from './FromList.vue'
export default {
 name: 'search',
 data() {
  return {
   projectN: '',     // 创业项目名称
   companyN: '',     // 所属公司名称
   mechanismN: ''    // 所属机构名称
  }
 },
 components: {
  FromList
 }
}
</script>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
node中的session的具体使用
Sep 14 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 #Javascript
Vue中之nextTick函数源码分析详解
Oct 17 #Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 #Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
Vue2.0父子组件传递函数的教程详解
Oct 16 #Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 #Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 #Javascript
You might like
解析PHP的session过期设置
2013/06/29 PHP
33道php常见面试题及答案
2015/07/06 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
详谈python中冒号与逗号的区别
2018/04/18 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Python容器类型公共方法总结
2020/08/19 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
职代会闭幕词
2015/01/28 职场文书
退税申请报告怎么写
2015/05/18 职场文书
2015年路政工作总结
2015/05/22 职场文书
小学作文之描写天气
2019/08/15 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Java8中接口的新特性使用指南
2021/11/01 Java/Android
关于python中模块和重载的问题
2021/11/02 Python