vue2和vue3的v-model的区别

v-model

你可以用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

vue2的v-model

原理还是传递一个value参数和绑定了一个input事件

<template>
  <div>
    <myinput v-model="inputValue" />
    {{ inputValue }}
  </div>
</template>
<script>
import myinput from "./myinput"
export default {
  components:{
    myinput
  },
  data() {
    return {
      inputValue:'1'
    };
  }
}
</script>

组件

<template>
  <input type="text" :value="value" @input="oninput">
</template>

<script>
export default {
  props:['value'],
  methods:{
    oninput(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

vue3的v-model

默认是传递一个modelValue参数，修改是通过update:modelValue来修改这个值，是可以传递多个v-model，

<template>
  <myinput v-model="inputvalue" v-model:name="inputname"></myinput>
  {{ inputvalue }},
  {{ inputname }}
</template>
<script>
import myinput from "./myinput";
import { ref } from "vue";
export default {
  components: {
    myinput
  },
  setup() {
    let inputvalue = ref("1");
    let inputname = ref("name");

    return {
      inputvalue,
      inputname
    };
  }
};
</script>
<style lang="less">
</style>

组件

<template>
  <input type="text" :value="modelValue" @input="oninput" />
  <input type="text" :value="name" @input="onnameinput" />
</template>

<script>
export default {
  props: ["modelValue", "name"],
  setup(props, context) {
    function oninput(e) {
      context.emit("update:modelValue", e.target.value);
    }
    function onnameinput(e) {
      context.emit("update:name", e.target.value);
    }
    return {
      oninput,
      onnameinput
    };
  }
};
</script>

<style lang="less" scoped></style>