vue3与vue2 的v-model差别

v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别:

2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’), 绑定属性值是 value
3.0 中可以绑定一个自定义值,支持统一组件绑定多个 v-model,v-model:firstName=“firstName”, :value=“firstName” 和 @input="$emit(‘update:firstName’, $event.target.value)"
添加自定义修饰符 v-model.capitalize

自定义input组件源码比较:

App.vue:

<template>
  <div id="app">
    <h1>Vue3中v-model的变化</h1>
    <input type="text" v-model="name"/>
    <p>{{ name }}</p>
    <!-- Vue2的写法 -->
    <!-- v-model实际上就是:value和@input的语法糖 -->
    <!-- 双向绑定多个属性的时候可以使用.sync关键字 -->
    <CustomInput v-model="age" :name.sync="name"/>
    <!-- Vue3的写法 -->
    <CustomInput v-model:age="age" v-model:name="name"/>
  </div>
</template>

<script>
import CustomInput from "../components/CustomInput.vue";
export default {
  name: "App",
  components: {
  	CustomInput
  },
	data() {
    return {
    	name: "你好",
      age: 20,
    }
  },
}
</script>

CustomInput.vue:

<template>
  <div class="custom-input">
    <h1>自定义的input</h1>
    <!-- Vue2的写法 -->
    <input type="text" :value="value" @input="onInput" />
    <input type="text" :value="name" @input="onNameInput" />
    <!-- Vue3的写法 -->
    <input type="text" :value="age" @input="onInput" />
    <input type="text" :value="name" @input="onNameInput" />
  </div>
</template>

<script>
import CustomInput from "../components/CustomInput.vue";
export default {
  // Vue2的写法
  props: ["value", "name"],
  // Vue3的写法,直接接收绑定的参数
  props: ["age", "name"],
  // Vue3双向绑定单个属性时,可以使用modelValue来接收参数并更新,对应的触发事件为update:modelValue
  props: ["modelValue"],
  methods: {
  	onInput(e) {
      // Vue2的写法
      // 触发的事件只能是input
      // e.target.value是字符串需要转换成数字
    	this.$emit("input", parseInt(e.target.value));
      // Vue3的写法
      this.$emit("update:age", e.target.value);
    },
    onNameInput(e) {
      // 只能用update
    	this.$emit("update:name", e.target.value);
    },
  },
}
</script>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页