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

Vue中封装input组件

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

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

代码如下

子组件的模板设置

<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>

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

赞 (0)

相关推荐

  • vue通过watch对input做字数限定的方法

    之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了 <div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div> new Vue({ el: '#app', data:

  • vue.js中v-on:textInput无法执行事件问题的解决过程

    vue.js中v-on:textInput无法执行事件问题的解决过程

    前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • Vue input控件通过value绑定动态属性及修饰符的方法

    对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • vue获取input输入值的问题解决办法

    vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这

  • vue.js 1.x与2.0中js实时监听input值的变化

    vue.js 1.x与2.0中js实时监听input值的变化

    一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令

  • vue2.0结合Element实现select动态控制input禁用实例

    vue2.0结合Element实现select动态控制input禁用实例

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也

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

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

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • Vue中实现过渡动画效果实例详解

    Vue中实现过渡动画效果实例详解

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动

  • vue 中 命名视图的用法实例详解

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件.内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个 router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • Angular2 组件交互实例详解

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: l 使用输入型绑定,把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 ViewChild l 父组件和子组件通过服

随机推荐