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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
js constructor的实际作用分析
Nov 15 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
js实现登录拖拽窗口
Feb 10 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 中的类
2006/10/09 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
请离开include_once和require_once
2013/07/18 PHP
php中stream(流)的用法
2014/03/25 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python快排算法详解
2019/03/04 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
物业门卫岗位职责
2013/12/28 职场文书
半年思想汇报
2013/12/30 职场文书
心理健康心得体会
2014/01/02 职场文书
发展部经理职责规定
2014/02/22 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
解析目标检测之IoU
2021/06/26 Python