Vue3与Vue2--- v-model语法糖

      v-model在vue中很重要，实现数据与视图的双向绑定，但在Vue2和Vue3中，v-model的使用还有有区别的。v-model本质上就是绑定属性和事件的结合。

1、vue2中v-model的应用场景

（1）在vue2中，v-model绑定的:value属性，和input事件。当然v-model可以绑定在DOM上，也可以绑定在组件上

<template>
  <div>
    <div>v-model指令用法</div>
    <hr>
    <div>{{uname}}</div>
    用户名：<input type="text" v-model='uname'>
    <!-- v-model的本质是属性绑定和事件绑定的结合 -->
    <input type="text" :value='uname' @input='uname=$event.target.value'>
    <!-- ---------------------------------------------------------------- -->
    <!-- v-model也可以使用到组件上 -->
    <my-com v-model='info'></my-com>
    <!-- 此时 $event表示子组件传递的具体数据 this.$emit('input', 100) -->
    <my-com :value='info' @input='info=$event'></my-com>
    <!-- Vue2中$event有两层含义 -->
    <!-- 1. 如果是原始DOM的事件，那么$event表示js的原生事件对象 -->
    <!-- 2、如果是组件的自定义事件，那么$event是$emit传递的数据 -->
  </div>
</template>

<script>
import { ref } from 'vue'

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

    当v-model绑定在DOM上时，绑定的input事件就是原生的input事件，那么$event表示js的原生事件对象

   当v-model绑定在组件上，那么绑定的input事件就是自定义的事件，传递的$event是$emit传递的数据

2、vue3中v-model的新特性

vue3中v-model的本质是：绑定  :modelValue和@update:modelValue两者的绑定

<template>
  <div>
    <div>v-model指令用法-Vue3</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>

<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传递过来的数据，要通过setup中的形参context.emit('update:modelValue','要修改的值')这样的形式修改传递过来的数据

Vue3中的  v-model可以使用多次

<template>
  <div>
    <div>v-model指令用法-Vue3</div>
    <hr>
    <div>{{info}}</div>
    <div>{{msg}}</div>
    <!-- v-model提供了一种双向绑定机制（在组件上-父子之间的数据交互） -->
    <!-- .sync修饰符已经被废弃，替代方案是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>

<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>

总结：v-model可以通过绑定多个属性的方式，向子组件传递多个值并且保证双向绑定

            可以替代vue2中sync修饰符