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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
js精确的加减乘除实例
Nov 14 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
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
怎样在UNIX系统下安装php3
2006/10/09 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript学习网址备忘
2007/05/29 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
最短的IE判断代码
2011/03/13 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
小学生安全保证书
2014/02/01 职场文书
表演方阵解说词
2014/02/08 职场文书
小班幼儿评语大全
2014/04/30 职场文书
2014年国庆标语
2014/06/30 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书