vue2和vue3的v-model

前言

v-model指双向数据绑定，分为表单元素绑定和组件绑定两种，是一个语法糖

作用

1. 表单元素进行操作，影响数据的变化，数据发生改变，也能够反映到表单元素上；
2. 子组件里操作父组件的值，因为vue倡导单向数据流的思想，所以子组件改变父组件的值只能通过属性绑定+emit方法结合，而这恰好是v-model的扩展写法

两种应用

表单元素v-model

v-bind绑定value/checked属性的值，v-on绑定input/change事件监听，事件类型依据元素类型而定，在监听函数中获取最新的值赋值到绑定的属性中。

组件v-model

1、vue2写法

1. sync实现双向绑定
2. 使用默认的属性value和方法input
3. 自定义属性modelValue和方法update

// *******************父组件
<template>
 <div>
   <child v-model="value" :sex.sync="sex"></child>
   <div>value:{{ value }}</div>
   <div>sex:{{ sex }}</div>
   <el-button @click="changeInput()">父改变子input</el-button>
 </div>
</template>
<script>
   import child from '../components/child.vue'
   export default {
     data() {
       return {
         value: '',
         sex: '',
       }
     },
     methods: {
       changeInput() {
         this.value = ''
         this.sex = ''
       }
     },
     components: {
       "child": child
     },
   }
</script>


// *********************子组件
<template>
 <div>
   <!-- v-model默认属性value，默认事件input -->
   <el-input v-model="valueSon"></el-input>
   <!-- sync -->
   <el-input v-model="sexSon"></el-input>
 </div>
</template>
<script>
   export default {
     // 默认
     model: {
       prop: 'value',
       event: 'input'
     },
     // 自定义
     model: {
       prop: 'modelValue',
       event: 'update'
     },
     props: {
     	// 默认
       value: {
         type: String,
         default: ''
       },
       // 自定义
       modelValue: {
         type: String,
         default: ''
       },
       sex:{
         type: String,
         default: ''
       }
     },
     computed: {
       sexSon: {
         get: function () {
           return this.sex
         },
         set: function (value) {
           this.$emit('update:sex', value)
         }
       },
       valueSon: {
         get: function () {
           return this.value
         },
         set: function (value) {
           // 默认
           this.$emit('input', value)
           // 自定义
           this.$emit('update', value)
         }
       },
     }
   }

2、vue3写法

1. Vue3移除了model选项和sync修饰符实现v-model
2. Vue3支持使用多个v-model

// *********************父组件
<template>
  <div>
    <vueDemo2 v-model:num="num" v-model="value"></vueDemo2>
    <div>num: {{ num }}</div>
    <div>value: {{ value }}</div>
    <el-button @click="clearForm">父改变子</el-button>
  </div>
</template>
<script setup>
	import { ref } from "vue";
	import vueDemo2 from "../components/vue_2.vue";
	let num = ref("");
	let value = ref("");
	const clearForm = () => {
	  num.value = "";
	  value.value = "";
	};
</script>

//***************子组件
<template>
  <div>
    <el-input v-model="numNew"></el-input>
    <el-input v-model="valueNew"></el-input>
  </div>
</template>
<script setup>
	import { defineEmits, defineProps, computed } from "vue";
	let props = defineProps({
	  num: {
	    type: String,
	    default: "",
	  },
	  modelValue: {
	    type: String,
	    default: "",
	  },
	});
	const emit = defineEmits(["update:value", "update.num"]);
	const numNew = computed({
	  get: () => {
	    return props.num;
	  },
	  set: (val) => {
	    emit("update:num", val);
	  },
	});
	const valueNew = computed({
	  get: () => {
	    return props.modelValue;
	  },
	  set: (val) => {
	    emit("update:modelValue", val);
	  },
	});
</script>