前言

v-model 實(shí)際上就是 $emit('input') 以及 props:value 的組合語法糖。

1.封裝自定義組件

要在 Vue 中實(shí)現(xiàn)自定義組件的 v-model 功能，你可以通過使用 model 選項(xiàng)來定義組件的 prop 和事件。以下是一個示例代碼，演示如何實(shí)現(xiàn)一個自定義組件并使用 v-model 來進(jìn)行雙向綁定：

<template><div><input :value="value" @input="updateValue($event.target.value)"></div>
</template><script>
export default {props: {value: String},model: {prop: 'value',event: 'input'},methods: {updateValue(value) {this.$emit('input', value);}}
};
</script>

在上面的示例中，我們創(chuàng)建了一個簡單的自定義輸入框組件，通過 value prop 來接收父組件傳遞的值，并通過 updateValue 方法來觸發(fā) input 事件并將新的值傳遞給父組件。在組件的 model 選項(xiàng)中，我們定義了 prop 和事件的名稱，以便 Vue 知道如何處理 v-model。

2.使用自定義組件

在父組件中，你可以像下面這樣使用自定義組件，并通過 v-model 來進(jìn)行雙向綁定：

<template><div><CustomInput v-model="inputValue" /><p>Input value: {{ inputValue }}</p></div>
</template><script>
import CustomInput from './CustomInput.vue';export default {components: {CustomInput},data() {return {inputValue: ''};}
};
</script>

通過以上方式，你可以在 Vue 中實(shí)現(xiàn)自定義組件的 v-model 功能，實(shí)現(xiàn)雙向綁定的效果。

3.完善自定義組件

問題
上面有一個問題是props是單向數(shù)據(jù)流，不應(yīng)該在一個子組件內(nèi)部改變 props！

優(yōu)化完善如下

<template><div><input type="number" :value="currentValue" @input="changeValue"/></div>
</template><script>
export default {props:{value:{type: Number}},computed(){return {currentValue: this.value}}methods:{changeValue(e){this.currentValue = parseInt(e.target.value);this.$emit('input', this.currentValue);}}
};
</script>