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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
Postman内建变量常用方法实例解析
Jul 28 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 页面执行时间计算代码
2008/12/04 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
jquery简单体验
2007/01/10 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python模块搜索路径代码详解
2018/01/29 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
出纳员岗位责任制
2014/02/11 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技