v-model機制詳解

我們都知道vue的雙向數(shù)據(jù)綁定，當(dāng)你改變它的值時，視圖層就跟著變化。

maxresdefault.jpg

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

其實它只是語法糖，主要是通過input事件來觸發(fā)input標(biāo)簽value值來實現(xiàn)我們說的“雙向數(shù)據(jù)綁定”,其實它還是單向數(shù)據(jù)流。上面的實際相當(dāng)于

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

在自定義組件中使用v-model的幾種方法

我們在封裝輸入框input、下拉選擇select、單選多選radio等多會使用到自定義v-model功能。下面介紹幾種常用方法的使用：

1. prop + $emit

搞過vue開發(fā)的同志們都知道我們經(jīng)常用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標(biāo)簽的原生事件input將值emit出去，以達到值得改變實現(xiàn)雙向綁定
            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標(biāo)簽的原生事件input將值emit出去，以達到值得改變實現(xiàn)雙向綁定
            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是單向數(shù)據(jù)流，2.0版本上不允許在組件內(nèi)部直接修改 
                 v = val
                 this.$emit('input', v) //這里多用于子組件間沒有input元素中,通過在computed屬性中監(jiān)聽值變化事emit input事件
            }
        }
    },
    components: { AppTable }
  }
</script>
<style scoped type="less">
</style>

三種方式則在父組件中使用

<template>
    <div class="main">
        <k-input v-model="search" placeholder="請輸入搜索關(guān)鍵詞"></k-input>
    </div>
</template>
<script>
import kInput from '@/components/common/kInput' //引入這個自定義組件(根據(jù)自己項目具體位置引入)
export default {
    data () {
      return {
        search: ''
      }
    },
    components: {
        kInput  // 局部注冊組件
    }
}
</script>

有什么不對的地方歡迎批評指正。