vue爬坑之input组件

Posted 2020-10-26 狗蛋爸爸

本篇写给第一次用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" />