亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3.js自定義組件 v-model詳解

 更新時間：2023年10月19日 14:34:56   作者：彭世瑜  
在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧

Vue3的自定義v-model和vue2稍有不同

文檔

https://cn.vuejs.org/guide/components/v-model.html

原生組件

<input v-model="searchText" />

等價于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

自定義組件

<CustomInput v-model="searchText" />

等價于

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

CustomInput實現(xiàn)代碼1

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

CustomInput實現(xiàn)代碼2

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>
<template>
  <input v-model="value" />
</template>

v-model 的參數(shù)

默認使用的是modelValue, 可以自定義參數(shù)名

<MyComponent v-model:title="bookTitle" />

組件實現(xiàn)

<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>
<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

到此這篇關(guān)于Vue3.js自定義組件 v-model的文章就介紹到這了,更多相關(guān)Vue3 v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論