vue2、vue3中自定義v-model的使用和區別

在我們的日常開發中，時常需要寫一些自定義組件，而其中可能就會使用到v-model，v-model是Vue中的一個指令，用來實現數據的雙向綁定，實現數據、視圖更新，v-model是一個語法糖，，我們可以自定義v-model指令的部分內容。

vue2中自定義v-model

在vue2中想要自定義v-model，我們需要在組件中設定model變量

export default {
  name:'SlideOption', model:{ // 激活的下標值 prop:'activeIndex', event:'update' }, props: { slides: { type: Array, default() { return ['廣場','我的圈子','話題'] } }, activeIndex:{ // 用來獲取當前活躍的按鈕下標值  type:[String,Number], default:0 } }, methods: { changeIndex(index){ this.$emit('update',index) // 通過該事件更新綁定的值  } } }

然后父組件引入該子組件后，v-model綁定對應的變量即可，子組件中觸發changeIndex事件即可使這個綁定的值slideIndex發生變化

<SlideOption v-model="slideIndex"></SlideOption>

vue3中自定義v-model

在vue3中想要自定義v-model，我們不在需要在組件中設定model變量了

export default {
  name:'SlideOption', props: { slides: { type: Array, default() { return [] } }, activeIndex:{ // 用來獲取當前活躍的按鈕下標值  type:[String,Number], default:0 } }, setup(context) { const changeIndex = (index) => { context.emit("update:activeIndex", index); } const changeSlides = (info) => { context.emit("update:slides", info); } return { changeIndex, changeSlides } } }

父組件中引入子組件，綁定值

<SlideOption v-model:activeIndex="slideIndex" v-model:slides="slideInfo"></SlideOption>

vue2、vue3中自定義v-model的使用區別

vue2中只允許在組件上使用一個 model，vue3中雙向數據綁定的 API 標准化，組件上允許使用多個model。