​

Writing in the front

Good evening, my friends, I have been working on a Vue3 project recently, and there may be more knowledge points about Vue3 recently.

This article will write the grammar sugar principle of V-model in Vue3, and review the knowledge point of V-model in Vue2.

New v-Model features in Vue3

1. In Vue3, the essence of V-Model is the binding of modelValue and @update:modelValue

Sample code:

The parent component

< the template > < div > < div > v - model usage instruction - Vue3 components (father) < / div > < hr > < div > {{info}} < / div > + <! -- <TestEvent v-model='info' /> --> + <TestEvent :modelValue='info' @update:modelValue='info=$event' /> </div> </template> <script> import TestEvent from './TextEvent.vue' import { ref } from 'vue' export default { name: 'App', components: { TestEvent }, setup () { const info = ref('hello') return { info } } } </script>Copy the code

Child components:

<template> <div> child component {{modelValue}} </div> < button@click ='handleEdit'> Click </button> </template> <script> export default { Name: 'TestEvent', props: {+ // in Vue3, the default attribute name of the V-model binding is modelValue + modelValue: {+ type: String, + default: }}, setup (props, context) {const handleEdit = () => {// props. ModelValue = 'nihao' // tell the parent to modify data //.sync modifier: Emit ('update:modelValue', 'nihao')} return {handleEdit}} </script>Copy the code

2. V-model can be used multiple times

Sample code:

The parent component

< the template > < div > < div > v - model usage instruction - Vue3 components (father) < / div > < hr > < div > {{info}} < / div > < div > {{MSG}} < / div > <! The V-Model provides a two-way binding mechanism (on components - data interaction between parent and child) --> <! The --.sync modifier is deprecated and the alternative is v-model --> <! -- <TestEvent v-model='info' :msg.sync='msg' /> --> + <TestEvent v-model:modelValue='info' v-model:msg='msg' /> + <! -- <TestEvent :modelValue='info' @update:modelValue='info=$event' /> --> </div> </template> <script> import TestEvent from './TextEvent.vue' import { ref } from 'vue' export default { name: 'App', components: { TestEvent }, setup () { const info = ref('hello') const msg = ref('hi') return { info, msg } } } </script>Copy the code

Child components

<template> <div> child component {{modelValue}} </div> < button@click ='handleEdit'> Click </button> </template> <script> export default { Name: 'TestEvent', props: {// in Vue3, the default attribute name of the V-model binding is modelValue modelValue: {type: String, default: "}, MSG: { type: String, default: }}, setup (props, context) {const handleEdit = () => {// props. ModelValue = 'nihao' // tell the parent to modify data //.sync modifier: Emit ('update: MSG ') + context.emit('update:modelValue', 'nihao') + context.emit('update: MSG ', 'coniqiwa') } return { handleEdit } } } </script>Copy the code

conclusion

1. V-model can pass multiple values to child components by binding multiple properties and ensure bidirectional binding

Can replace sync modifier in Vue2 (sync modifier is deprecated in Vue3)

Application scenarios of V-Model in Vue2

Sample code:

<template> <div> <div> V-model instruction usage -vue2 </div> <hr> <div>{{uname}}</div> user name: <input type="text" V-model ='uname'> <! <input type="text" :value='uname' @input='uname=$event.target.value'> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > <! - v - the model can also be used to the component - > < my - com v - model = 'info' > < / my - com > <! $emit('input', 100) --> <my-com :value='info' @input='info=$event'></my-com> <! Vue2 $event has two meanings --> <! If the event is a native DOM event, then $event represents the js event object --> <! </div> </template> <script> import {ref} from 'vue' export default {name: 'App', setup () { const uname = ref('tom') return { uname } } } </script>Copy the code

conclusion

$event represents the event object

$event represents the data passed by the child component

Write in the last

And that’s all for today, my friends. See you next time

​