使用 V 模型

¥useVModel

v-model 绑定的简写，props+emit->ref

¥Shorthand for v-model binding, props + emit -> ref

我们鼓励你使用 Vue 的 defineModel 而不是此可组合项，但是有一些特殊情况，例如使用 TSX 或 defineModel 不支持的 deep: true 选项。

¥We encourage you to use Vue's defineModel over this composable, however there are some edge-cases like using TSX or the deep: true option that defineModel doesn't support.

用法

¥Usage

TypeScript

import { useVModel } from '@vueuse/core'

const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const data = useVModel(props, 'modelValue', emit)

import { useVModel } from '@vueuse/core'
const props = defineProps()
const emit = defineEmits(['update:modelValue'])
const data = useVModel(props, 'modelValue', emit)

选项 API

¥Options API

import { useVModel } from '@vueuse/core'

export default {
  setup(props, { emit }) {
    const data = useVModel(props, 'data', emit)

    console.log(data.value) // props.data
    data.value = 'foo' // emit('update:data', 'foo')
  },
}