首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 v-model自定义组件

Vue3.js自定义组件 v-model详解

2023-10-19 14:34:56 作者：彭世瑜

在Vue3 中,v-model是用于创建双向数据绑定的指令,通常,我们使用该指令将任何 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实现代码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实现代码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 的参数

默认使用的是modelValue, 可以自定义参数名

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

组件实现

<!-- 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>

到此这篇关于Vue3.js自定义组件 v-model的文章就介绍到这了,更多相关Vue3 v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！