The V-Model in Vue3 has undergone great changes compared with the V-Model in Vue2. The changes are as follows:

  • Changed: Used on custom componentsv-modelThe default names of properties and events change
  • Change:v-bindthe.syncModifiers have been removed in Vue3 and mergedv-modelIn the
  • Added: Multiple components can be configured at the same timev-model
  • New: Developers can customizev-modelThe modifier

The grammar of the Vue2

In Vue2, using the V-Model on the component is equivalent to passing the value property, triggering the input event

Child v - model = "MSG" < / a > / / the above writing is equivalent to: < Child: value = "MSG" @ input = "MSG = $event" / >Copy the code

If you want to change a prop or event name, add the Model option to Child

<Child v-model=" MSG "/>Copy the code
Child.vue export default {model: {prop: 'title', event: 'change'}}Copy the code

So, the V-model in this example is shorthand for the following

<Child :title="msg" @change="msg=$event"/>
Copy the code

In some cases, we need to bind prop in both directions. For example, the parent component can define whether the popup is visible and pass it to the child component as prop. The child component can also control whether visible is hidden and pass the value of Visible to the parent component. You can pass the value of Visible to the parent component in the following ways:

  this.$emit('update:visible',false)
Copy the code

Then listen for this event in the parent component for data updates:

 <Dialog :visible="isVisible" @update:visible="isVisible=$event"/>
Copy the code

The above code can be simplified using v-bind.sync:

  <Dialog :visible.sync="isVisible"/>
Copy the code

The grammar of the Vue3

In Vue3, using v-Models on custom components is equivalent to passing a modelValue property and firing the Update :modelValue event

<Child v-model="isVisible"> <Child :modelValue="isVisible" @update:modelValue="isVisible=$event">Copy the code

We can also bind multiple V-Models:

<Child v-model:visible="isVisible" v-model:content="content"/>  <Child :visible="isVisible" :content="content" @update:visible="isVisible" @update:content="content"/>Copy the code

Here’s a full example:

//App.vue <template> <! Child v - model - < = "state. The name" v - model: the age = "state. The age" / > -- > / / equivalent the following:  <Child :modelValue="state.name" @update:modelValue="state.name = $event" :age="state.age" @update:age="state.age = $event" /> </template> <script> import { defineComponent, reactive, reeactive } from "vue"; import Child from "./components/Child.vue"; export default defineComponent({ components: { Child, }, setup() { const state = reactive({ name: "Jerry", age: 20, }); return { state }; }}); </script>Copy the code
// child-vue <template> <span @click="changeInfo"> < {age}} </span> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ props: ["modelValue", "age"], setup(props, context) { const changeInfo = () => { context.emit("update:modelValue", "Tom"); context.emit("update:age", 30); }; return { changeInfo }; }}); </script>Copy the code

reference

Vue3.2 Setup syntax sugar and Composition API summarize Vue3 documents