Vue 如何使用v-model与自定义input组件数据双向绑定？

admin vue 10310 2021-03-26 17:48:58

#### 我们都知道Vue中的 v-model 可以与input框进行数据双向绑定
```
<template>
  <div class="home">
    <input type="text" v-model="val" />
    {{ val }}
  </div>
</template>

#### 这个想必大家都会，就不过多介绍了。我今天要分享的是如何使用v-model与自定义组件数据双向绑定，因为默认的搜索框样式功能都很少，所以我们需要自己封装一个input组件。话不多说，直接进入主题。

先跟大家分享一下不用v-model是怎样实现的
首先需要新建一个组件，这里使用的是Input.vue，代码如下
```
<template>
  
  <div>
    <input type="text" :value="val" @input="change" />
  </div>
</template>

页面代码
```
<template>

  <div class="home">
    <Input :val="val" @change="change" />
    {{ val }}
  </div>
</template>

这里用到的是子父组件传值。首先把val通过自定义数据传到子组件里，当子组件数据发生变化时，再把数据通过自定义事件传给父组件。

v-model在组件上使用也是类似的思路，只不过是Vue帮我们了。

[自定义组件v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)
官网跟我们说了，组件使用v-model使用了自定义数据value和自定义方法input
```
<template>
  
  <div>
    <input type="text" :value="value" @input="change" />
  </div>
</template>

```
可以看到Home.vue使用了v-model后精简了很多，只需要一个写v-model把值传过去。
Input.vue中把接受值改为value，然后当数据变化时，通过自定义事件input传过去。就可以进行组件数据双向绑定了。