1---
2category: Component
3related: useVModel
4---
5 
6# useVModels
7 
8Shorthand for props v-model binding. Think it like `toRefs(props)` but changes will also trigger emit.
9 
10## Usage
11 
12```ts
13import { useVModels } from '@vueuse/core'
14 
15const props = defineProps({
16  foo: string,
17  bar: number,
18})
19 
20const emit = defineEmits(['update:foo', 'update:bar'])
21 
22const { foo, bar } = useVModels(props, emit)
23```
24 
25### Options API
26 
27```ts
28import { useVModels } from '@vueuse/core'
29 
30export default {
31  props: {
32    foo: String,
33    bar: Number,
34  },
35  setup(props, { emit }) {
36    const { foo, bar } = useVModels(props, emit)
37 
38    console.log(foo.value) // props.foo
39    foo.value = 'foo' // emit('update:foo', 'foo')
40  },
41}
42```
43 
44## Type Declarations
45 
46```ts
47/**
48 * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
49 *
50 * @see https://vueuse.org/useVModels
51 * @param props
52 * @param emit
53 * @param options
54 *
55 * @__NO_SIDE_EFFECTS__
56 */
57export declare function useVModels<P extends object, Name extends string>(
58  props: P,
59  emit?: (name: Name, ...args: any[]) => void,
60  options?: UseVModelOptions<any, true>,
61): ToRefs<P>
62export declare function useVModels<P extends object, Name extends string>(
63  props: P,
64  emit?: (name: Name, ...args: any[]) => void,
65  options?: UseVModelOptions<any, false>,
66): ToRefs<P>
67```
68