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 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
查找iframe里元素的方法可传参
2013/09/11 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
Python中运行并行任务技巧
2015/02/26 Python
python中的闭包用法实例详解
2015/05/05 Python
深入理解Python中装饰器的用法
2016/06/28 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
如何写一个自定义标签
2012/12/28 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
教导处教学工作总结
2015/08/12 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书