Basic configuration usage
In vue, the parent component can upload values in the child component, and the child component passespropsReceive, but subcomponentNot modifiedprops, otherwise the console will report a warning, which is also in line with vueOne-way data flowPrinciple, so if you want to pass values to subcomponents and allow subcomponents to be modified, you will generally write this:
<!-- -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value=""
@input="emit('update:modelValue', $)"
/>
</template>Called in parent component
<!-- --> <Child :modelValue="foo" @update:modelValue="$event => (foo = $event)" />
In vue3, a new value transmission method defineModel is declared, which can more conveniently pass values to subcomponents and allows subcomponents to modify the value transmission to achieve bidirectional binding.
<!-- -->
<script setup>
const model = defineModel()
function update() {
++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>Parent component
<!-- --> <Child v-model="countModel" />
defineModel() returns a ref. It can be accessed and modified like other refs, but it can function as a two-way binding between the parent component and the current variable:
- Its .value is synchronized with the value of the v-model of the parent component;
- When it is changed by the child component, the value bound by the parent component will be triggered to be updated together.
defineModelTo allow configuration, you can declare the options of the underlying prop by passing options to defineModel:
// Make v-model requiredconst model = defineModel({ required: true })
// Provide a default valueconst model = defineModel({ default: 0 })It should be noted that if a default value is set for the defineModel prop and the parent component does not provide any value for the prop, it will cause the parent component to be out of synchronization.
<!-- -->
const model = defineModel({ default: 1 })
<!-- -->
const myRef = ref()
<Child v-model="myRef"></Child>In the above code, the parent component's myRef is undefined, while the child component's model is 1, so if setInitial value, both should be maintainedConsistent。
Configuration parameters, bind multiple v-models
The v-model on the component can also accept a parameter:
<MyComponent v-model:title="bookTitle" />
<!-- -->
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>If you need an extra prop option, you should pass it after the model name:
const title = defineModel('title', { required: true })Bind multiple v-models
<UserName v-model:first-name="first" v-model:last-name="last" />
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
</template>This is the end of this article about the detailed explanation of the use examples of Vue3 defineModel. For more information about the use of Vue3 defineModel, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!