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

v-model机制详解

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

maxresdefault.jpg

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

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

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

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

<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

<template>
    <input type="text" :value="value2" />
    /*<app-table :data="value2"></app-table>*/
</template>
<script>
import AppTable from '@/component/common/AppTable'
  export default {
    name: 'kInput',
    props: {
        value: ['String', 'Number'],
        placeholder: String
    },
    computed: {
        value2: {
            get() {
               const v = this.value 
               return v
            },
            set(val) {
                const v = JSON.parse(JSON.stringify(this.value))//利用深拷贝原理使得修改prop值不会报错,因为prop是单向数据流，2.0版本上不允许在组件内部直接修改 
                 v = val
                 this.$emit('input', v) //这里多用于子组件间没有input元素中,通过在computed属性中监听值变化事emit input事件
            }
        }
    },
    components: { AppTable }
  }
</script>
<style scoped type="less">
</style>

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

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

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