vue爬坑之input组件

Posted 狗蛋爸爸

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue爬坑之input组件相关的知识,希望对你有一定的参考价值。

本篇写给第一次用VUE写输入框组件的朋友们

正常情况我们vue2.0是怎么样取到input框的值的呢?

很简单只需要给input框设置v-model="val"

我们就能从data里的val里面实时取到当前输入框的值

但是我们如果直接用v-model 给组件绑定上一个val,如果不做任何处理,我们是拿不到组件中的input的值的

 

如何才能拿到组件中Input的值,并双向绑定?

 

首先我们得来了解一下v-model是什么,在vue2.0的文档中v-model是用来双向绑定表单元素数据的

v-model 其实是一个语法糖,把v-model=“val”拆分开

可以看做是 :value="val"  @input="val = $event.target.value"

<input v-model="val" />
<input @input="val=$event.target.value" :value="val"/>  

以上两行代码的效果是一样的。

在明白了v-model的原理之后我们就可以愉快的使用v-model来绑定我们组件输入框的数据了

我们现在有一个输入框组件<My-input/>

那么想直接利用v-model来取到My-input里面的值应该怎么做呢?

My-input的代码

<div>
    <input  type="text" />
</div>

在我们使用组建的时候如果直接这么写<My-input v-model="val" />

显然这样是不可行的

因为组件再渲染过后的dom根节点是div 试问给div加了v-model怎么可能能取到值呢?

所以我们可以改写组件的代码

原理是这样的v-model 中有一个@input事件 有一个子组件传值:value

所以我们可以在组件My-input中监听@input事件 ,并且事实改变子组件的value值

在子组件触发@input事件之后向父组件的@input事件传值这样做就可以通过v-model双向绑定输入框组件的值了

组件代码如下:

<div>
     <input :value="value" @input="handelChange"type="text"/>
</div>

JS部分

export default {
  data() {
    return {
      val: this.value
    };
  },
  props: {
    value: {
      type: ‘‘,
      default:‘‘
    }
  },
  methods: {
    handelChange(event) {
      let val = event.target.value;
      this.val = val;
    }
  },
    //监听子组件的val变化
  watch: {
    val: function(val) {
    //向父级的input事件传值
      this.$emit("input", val);
    }
  }
};

父级元素使用

<My-input v-model="text" />

 

以上是关于vue爬坑之input组件的主要内容,如果未能解决你的问题,请参考以下文章

2048小游戏——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

vue使用填坑之:model和v-model的区别

Vuejs爬坑记

小程序爬坑之时间格式IOS的兼容

京东账户——Mysql/PHP/Ajax爬坑之产品列表显示

京东账户——Mysql/PHP/Ajax爬坑之添加购物车