之前學(xué)習(xí)vue2雙向綁定的時候，為了加深理解，寫了一篇文章 Vue 自定義組件實現(xiàn)v-model雙向綁定，最近想著vue3也發(fā)布這么久了窥淆，就想著看看怎么在vue3中自定義組件怎么實現(xiàn)雙向綁定附较。也想著最近每隔一周就寫一篇關(guān)于vue3的文章，慢（懶）的話巧娱，就兩周寫一篇碉怔。
其實vue3的v-model跟vue2的使用區(qū)別不大，只是跟vue2的sync修飾符進行了合并禁添，所以在vue3中就移除了 sync修飾符撮胧。下面我們看看怎么在composition api中怎么寫v-model
// 自定義一個TestModel組件
<template>
<div>
<input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String
}
}
}
</script>
然后在別的地方使用
// 引用TestModel組件
<template>
<h1>vue3中使用v-model {{msg}}</h1>
<testModel v-model="msg"></testModel>
<!-- 等同于下面語法 默認傳入一個modelValue 然后子組件接收這個modelValue -->
<testModel :modelValue="msg" @update:modelValue="msg = $event"></testModel>
</template>
<script>
import { ref } from 'vue';
import testModel from './TestModel.vue';
export default {
components: {
testModel
},
setup(){
const msg = ref('')
return { msg }
},
}
</script>
當然我們可能不想叫modelValue，也可以改成其他的名字老翘，需要這樣改寫一下
// 父組件
<template>
<h1>vue3中使用v-model {{msg}}</h1>
<testModel v-model:msg="msg"></testModel>
</template>
子組件接收的props就要改成msg了
// 子組件
<template>
<div>
<input type="text" :value="msg" @input="$emit('update:msg', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
msg: {
type: String
}
}
}
</script>
雙向綁定不一定必須是輸入框組件芹啥，可以自定義各種各樣的組件，比如通過click事件改變父組件的值
// 父組件
<template>
<div>{{count}}</div>
<testModel v-model:count="count"></testModel>
</template>
<script>
export default {
components: {
testModel
},
setup(){
const count = ref(0)
return { count }
}
}
</script>
// 子組件
<template>
<!-- 一定是+1 不是+=1 或者++ 否則vue會觸發(fā)一個不讓子組件直接改變props的警告 -->
<div @click="$emit('update:count', count + 1)">click me count + 1酪捡！</div>
</template>
<script>
export default {
props: {
count: {
type: Number
}
}
}
</script>
