vue3.0 v-model自定義元件實現,回顧vue2.x v-model

vue2.x
v-model 語法糖

model:

預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event
但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。

預設狀態下

model: {
	prop: 'value',
	event: 'change'
}

vue3.0
v-model 語法糖

<my-component v-model="fool" />

h(Comp, {
	modelValue: foo,
	'onUpdate:modelValue': value=> (foo =value)
})

自定義元件實現

props: {
	modelValue: String
}

// @blur

setup(props,ctx) {
	ctx.emit('update:modelValue', {xxx: xxx})
}