原來(lái)的實(shí)現(xiàn)方式
自定義的MyInput組件
<template>
? <div class="myInput">
? ? ? <!-- 這里只能用 vModel 不可以使用橫杠寫(xiě)法 -->
? ? <input type="text" :value="vModel" @input="inputHandle">
? </div>
</template>
<script>
export default {
? name: "MyInput",
? props: {
? ? ? // 這里也可以寫(xiě)成 'v-model': String 但是建議根據(jù)風(fēng)格來(lái)胶哲，如果左邊都沒(méi)有引號(hào)就直接駝峰
? ? vModel: String
? },
? methods: {
? ? inputHandle (event) {
? ? ? ? // 注意：這里使用 update:v-model 或 update:vModel 都可以
? ? ? this.$emit("update:v-model", event.target.value)
? ? }
? }
}
</script>
使用方式
// 方式一
<my-input :v-model="text" @update:v-model="text = $event"></my-input>
// 方式二
<my-input :v-model.sync="text"></my-input>
可以看到，原來(lái)的方式也能實(shí)現(xiàn)，但是就使用來(lái)說(shuō)v-model被當(dāng)成屬性兽泄，一定要在前面加上:才可以用動(dòng)態(tài)屬性薪前，結(jié)果就變成了:v-model褒翰，然后我們?yōu)榱撕?jiǎn)化寫(xiě)法去掉事件綁定苍狰，我們最終的效果就是 :v-model.sync這種寫(xiě)法總會(huì)讓人覺(jué)得怪怪的露筒，接下來(lái)我們就來(lái)解決這個(gè)問(wèn)題
vue-api的方式實(shí)現(xiàn)
自定義的MyInput組件
<template>
? <div class="myInput">
? ? <input type="text" :value="value" @input="inputHandle">
? </div>
</template>
<script>
export default {
? name: "MyInput",
? props: {
? ? value: String
? },
? methods: {
? ? inputHandle (event) {
? ? ? this.$emit("input", event.target.value)
? ? }
? }
}
</script>
使用方式
<my-input v-model="text"></my-input>
看到這里可能一部分同學(xué)會(huì)一臉懵逼耻涛，這就同步了废酷？emm，其實(shí)還真同步了抹缕，那 value 從哪兒來(lái)的澈蟆，input 事件也沒(méi)綁定啊，的確這些都被我們省略掉了卓研，其實(shí)這是 vue 的 api 帶給我們的便利趴俘，在我們?cè)噲D向自定義組件傳入 v-model 這個(gè)特殊的屬性的時(shí)候，vue 會(huì)幫我們做兩件事奏赘，一件是將 v-model 中的值作為 value 的值向下傳遞寥闪，這是我們?cè)趦?nèi)部要寫(xiě) props value 的原因，另一件是在當(dāng)前自定義組件上監(jiān)聽(tīng) input 事件磨淌，并在觸發(fā)改事件的時(shí)候疲憋，將第一個(gè)參數(shù)賦值給 v-model 中的變量。你可以看到在我們?nèi)庋鄄豢梢?jiàn)的地方 vue 為我們做了很多實(shí)際梁只，但是大家要明白他為什么給你做這么多缚柳，仔細(xì)想想不難看出，這些邏輯是業(yè)務(wù)場(chǎng)景中重復(fù)次數(shù)很多的邏輯搪锣， vue 不給你做秋忙，你自己也要做，還會(huì)閑麻煩！當(dāng)然這還沒(méi)結(jié)束呢！下面更精彩箭养！
為屬性 value 和事件 input 命名
有些時(shí)候我們可能希望 value 就作為一個(gè)普通的屬性往下傳，而我們的業(yè)務(wù)場(chǎng)景里面 input 作為事件也不夠形象监嗜，反正就是 value 和 input 不符合你的業(yè)務(wù)中的語(yǔ)義，這個(gè)時(shí)候我想改名抡谐，咋辦裁奇？接下來(lái)看下面的代碼:
<template>
? <div class="myInput">
? ? <input type="text" :value="text" @input="inputHandle">
? </div>
</template>
<script>
export default {
? name: "MyInput",
? model: {
? ? prop: "text", // 該屬性名
? ? event: "update:v-model" // 改事件名
? }
? props: {
? ? text: String // 即便改名了，這里也必不可少
? },
? methods: {
? ? inputHandle (event) {
? ? ? this.$emit("update:v-model", event.target.value)
? ? }
? }
}
</script>
深圳網(wǎng)站優(yōu)化www.zg886.cn
