vue自定义组件v-model几种实现方法，拿走不谢

### v-model机制详解

我们都知道vue的双向数据绑定，当你改变它的值时，视图层就跟着变化。

```vue

<input type="text" v-model="value" />

```

其实它只是语法糖，主要是通过input事件来触发input标签value值来实现我们说的“双向数据绑定”,其实它还是单向数据流。上面的实际相当于

```vue

<input type="text" :value="value" @input=v=>$emit('input', v)/>

```

#### 在自定义组件中使用v-model的几种方法

我们在封装输入框input、下拉选择select、单选多选radio等多会使用到自定义v-model功能。下面介绍几种常用方法的使用：

**1. prop + $emit**

搞过vue开发的同志们都知道我们经常用prop 和 $emit进行组件间通信，这方面不在本文具体阐述，详细请自行到[cn.vuejs.org]()了解

```vue

<template>

<input type="text" :value="value" @input="handleInput" :placeholder="placehodler" />

</template>

<script>

export default {

name: 'kInput',

props: {

value: ['String', 'Number'],

placeholder: String

},

methods: {

handleInput ($event) {

// 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定

this.$emit('input', $event.target.value)

}

}

}

</script>

<style scoped type="less">

</style>

```

**2. prop + $emit + model选项**

```vue

<template>

<input type="text" :value="value" @input="handleInput" />

</template>

<script>

export default {

name: 'kInput',

model: {

prop: 'value',

event: 'input'

},

props: {

value: ['String', 'Number'],

placeholder: String

},

methods: {

handleInput ($event) {

// 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定

this.$emit('input', $event.target.value)

}

}

}

</script>

<style scoped type="less">

</style>

```

**3. prop + $emit + computed**

```vue

<template>

<input type="text" :value="value2" @input="handleInput" />

</template>

<script>

export default {

name: 'kInput',

props: {

value: ['String', 'Number'],

placeholder: String

},

computed: {

value2: {

get() {

const v = JSON.parse(JSON.stringify(this.value)) //利用深拷贝原理使得修改prop值不会报错,因为prop是单向数据流，2.0版本上不允许在组件内部直接修改

return v

},

set(val) {

const v = JSON.parse(JSON.stringify(this.value))

return v = val

}

}

},

methods: {

handleInput () {

// 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定

this.$emit('input', this.value2)

}

}

}

</script>

<style scoped type="less">

</style>

```

三种方式则在父组件中使用

```vue

<template>

<div class="main">

<k-input v-model="search" placeholder="请输入搜索关键词"></k-input>

</div>

</template>

<script>

import kInput from '@/components/common/kInput' //引入这个自定义组件(根据自己项目具体位置引入)

export default {

data () {

return {

search: ''

}

},

components: {

kInput // 局部注册组件

}

}

</script>

```

有什么不对的地方欢迎批评指正。