vue2和vue3的v-model的区别

最新推荐文章于 2024-10-09 21:42:19 发布

陈大左

最新推荐文章于 2024-10-09 21:42:19 发布

阅读量1.2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/c347087870/article/details/116528309

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细解析了Vue.js中v-model指令的工作原理，从Vue2的实现方式到Vue3的更新。在Vue2中，v-model用于双向数据绑定，通过value属性和input事件实现。而在Vue3中，v-model默认使用modelValue参数，并通过update:modelValue来更新值，且支持多个v-model。文章通过代码示例展示了这一变化。

摘要由CSDN通过智能技术生成

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>