useVModel

用法

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')
  },
}

`<script setup>`

vue

<script lang="ts" setup>
import { useVModel } from '@vueuse/core'

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

const data = useVModel(props, 'modelValue', emit)
</script>

类型声明

显示类型声明

typescript

export interface UseVModelOptions<T, Passive extends boolean = false> {
  /**
   * 当 passive 设置为 `true` 时，将使用 `watch` 来同步 props 和 ref，
   * 而不是依赖 `v-model` 或 `.sync` 来工作。
   *
   * @default false
   */
  passive?: Passive
  /**
   * 当设置 eventName 时，其值将用于覆盖触发事件的名称。
   *
   * @default undefined
   */
  eventName?: string
  /**
   * 尝试检查深层嵌套对象或数组中属性的变化。
   * 仅在 `passive` 选项设置为 `true` 时适用
   *
   * @default false
   */
  deep?: boolean
  /**
   * 当没有传入值时，为返回的 ref 定义默认值。
   *
   * @default undefined
   */
  defaultValue?: T
  /**
   * 克隆 props。
   * 接受自定义克隆函数。
   * 当设置为 `true` 时，将使用 `JSON.parse(JSON.stringify(value))` 进行克隆。
   *
   * @default false
   */
  clone?: boolean | CloneFn<T>
  /**
   * 触发 emit 事件前的钩子函数，可用于表单验证。
   * 如果返回 false，则不会触发 emit 事件。
   *
   * @default undefined
   */
  shouldEmit?: (v: T) => boolean
}
export declare function useVModel<
  P extends object,
  K extends keyof P,
  Name extends string,
>(
  props: P,
  key?: K,
  emit?: (name: Name, ...args: any[]) => void,
  options?: UseVModelOptions<P[K], false>,
): WritableComputedRef<P[K]>
export declare function useVModel<
  P extends object,
  K extends keyof P,
  Name extends string,
>(
  props: P,
  key?: K,
  emit?: (name: Name, ...args: any[]) => void,
  options?: UseVModelOptions<P[K], true>,
): Ref<UnwrapRef<P[K]>>