在Vue2.0和Vue3.0中使用v-model

在Vue2.0中如何实现双向数据绑定呢？常用的方式又两种，一种是v-model，另一种是.sync,为什么会有两种呢？这是因为一个组件只能用于一个v-model，但是有的组件需要有多个可以双向响应的数据，所以就出现了.sync。在Vue3.0中为了实现统一，实现了让一个组件可以拥有多个v-model，同时删除掉了.sync。如下面的代码，分别是Vue2.0与Vue3.0使用v-model的区别。

在Vue2.0中使用v-model

<template>
  <a-input v-model="value" placeholder="Basic usage" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

在Vue3.0中使用v-model

在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名，Vue3.0就是通过给不同的v-model指定不同的modelValue来实现多个v-model

在使用v-model需要指定modelValue

<template>
  <!--在使用v-model需要指定modelValue-->
  <custom-input v-model:value="state.inputValue"></custom-input>
</template>
<script>
import { reactive } from "vue";
import CustomInput from "../components/custom-input";
export default {
  name: "Home",
  components: {
    CustomInput
  },
  setup() {
    const state = reactive({
      inputValue: ""
    });
    return {
      state
    };
  }
};
</script>

父子传
父

<template>
    <div>
        <div>这里是modelFather</div>
       //v-model:ShowName="state.name"
       //ShowName 自定义属性名
      //state.name属性值
        <ModelChildren
            v-model:ShowName="state.name"
            v-model:ShowEmail="state.email"
            v-model:ShowPhone="state.phone"
        />
    </div>
</template>

<script>
import ModelChildren from './ModelChildren.vue'
import { reactive } from 'vue'
export default {
    components: {
        ModelChildren
    },
    setup() {
        const state = reactive({
            name: '',
            email: '',
            phone: ''
        })
        return {
            state
        }
    }
}
</script>

子

<template>
    <div>
// $emit('update:ShowName', $event.target.value)
//  $emit('update广播
// ShowName 属性名 要和父组件的自定义名称一致
// 改变赋值
        <input type="text" placeholder="请输入姓名" :value="ShowName" @input="$emit('update:ShowName', $event.target.value)"><br>
        <input type="text" placeholder="请输入邮箱" :value="ShowEmail" @input="$emit('update:ShowEmail', $event.target.value)"><br>
        <input type="text" placeholder="请输入电话" :value="ShowPhone" @input="_handleChangeValue" />{{ShowPhone}}
    </div>
</template>
<script>
export default {
    props: {
        ShowName: {
            type: String,
            default: ""
        },
        ShowEmail: {
            type: String,
            default: ""
        },
        ShowPhone: {
            type: String,
            default: ""
        }
    },
    setup(props, {emit}) {
        function _handleChangeValue($event) {
            emit('update:ShowPhone', $event.target.value)
        }
        return {
            _handleChangeValue
        }
    }
    
}
</script>