vue3中v-model语法糖

v-model语法糖

写在前面

目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中v-model语法糖的使用,想了解vue2中的v-model可以去看我之前的文章。

1. Vue2中v-model的应用场景

<template>
  <div>
    <div>v-model指令用法div>
    <hr>
    <div>{{uname}}div>
    用户名：<input type="text" v-model='uname'>
    
    
    <input type="text" :value='uname' @input='uname=$event.target.value'>
    
    
    <my-com v-model='info'>my-com>
    
    <my-com :value='info' @input='info=$event'>my-com>
    
    
    
  div>
template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const uname = ref('tom')
    return { uname }
  }
}
script>

总结：Vue2中v-model的应用场景

1. 用到表单元素上：$event表示事件对象
2. 用到组件上：$event表示子组件传递的数据

2. Vue3中v-model新的特性

• v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定
  父组件

<template>
  <div>
    <div>v-model指令用法-Vue3div>
    <hr>
    <div>{{info}}div>
+    
+    <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>

子组件

<template>
  <div>
    子组件 {{modelValue}}
  div>
  <button @click='handleEdit'>点击button>
template>
<script>
export default {
  name: 'TestEvent',
  props: {
+    // Vue3中，v-model默认绑定的属性名称是modelValue
+    modelValue: {
+      type: String,
+      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符：update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
    }
    return { handleEdit }
  }
}
script>

• v-model可以使用多次，可以写成以下的样式
• v-model=‘info’， v-model:msg=‘msg’，v-model:自定义=‘自定义’
• v-model的是 :modelValue 和 @update:modelValue 两者的绑定
• v-model:msg是:msg 和 @update:msg两者的绑定

父组件

<template>
  <div>
    <div>v-model指令用法-Vue3div>
    <hr>
    <div>{{info}}div>
    <div>{{msg}}div>
    
    
    
+    <TestEvent v-model:modelValue='info' v-model:msg='msg' />
+    
  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>

子组件

<template>
  <div>
    子组件 {{modelValue}}
  div>
  <button @click='handleEdit'>点击button>
template>
<script>
export default {
  name: 'TestEvent',
  props: {
    // Vue3中，v-model默认绑定的属性名称是modelValue
    modelValue: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符：update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
+      context.emit('update:msg', 'coniqiwa')
    }
    return { handleEdit }
  }
}
script>

总结：

1. v-model可以通过绑定多个属性的方式，向子组件传递多个值并且保证双向绑定
2. 可以替代Vue2中sync修饰符（sync修饰符在Vue3中已经被废弃）