[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法

简介: [vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法

经典面试题:请阐述一下 v-model 的原理

经典面试题:请说一下vue2与vue3在使用 v-model 时的异同点

经典面试题:请列举 vue2/vue3 的父子组件的数据双向绑定的多种写法

本文即可将上述三个面试题阐述清楚,并提供具体案例来让小伙伴们加深理解、彻底掌握!本文较长,小伙伴们可以先收藏+关注,抽空学习哦~💕


💟 上一篇文章 Vue2中父子组件互相传值和方法调用(热榜前十)

📝 系列专栏 vue从基础到起飞

v-model 可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况(vue2, vue3),它都是一个语法糖,最终会生成一个属性和一个事件

当其作用于表单元素时vue会根据作用的表单元素类型而生成合适的属性和事件。例如:

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用 checked property 和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

v-model用于自定义组件

vue2的情况

v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value属性和input事件。

子组件 HelloWorld.vue

这个子组件只是实现一个简单计数器的功能,然后我向上分发的事件名称是update:value。但是vue2如果使用v-model会自动的把这个事件名称给改成input

<template>
  <div class="hello">
    <button @click="change(value - 1)">-</button>
    <span>{{value}}</span>
    <button @click="change(value + 1)">+</button>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    value: Number,
  },
  methods: {
    change(val) {
      this.$emit("update:value", val);
    },
  },
};
</script>
复制代码
APP.vue 来使用
<HelloWorld :value="inputVal" @update:value="inputVal = $event" />
等效于
<HelloWorld v-model="inputVal" />
复制代码

结果:

分析虚拟dom结果

vue2的虚拟dom查看方式是 在mounted中使用this._vnode来进行查看,然后查看componentOptions来查看组件传递的属性。

开发者可以通过组件的model配置来改变生成的属性和事件,例如:
修改子组件 HelloWorld.vue
<template>
  <div class="hello">
    <button @click="change(number - 1)">-</button>
    <span>{{ number }}</span>
    <button @click="change(number + 1)">+</button>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    number: Number,
  },
  model: {
    prop: "number", // 默认为 value
    event: "change", // 默认为 input
  },
  methods: {
    change(val) {
      this.$emit("change", val);
    },
  },
};
</script>
复制代码
 
父组件修改
<HelloWorld v-model="inputVal" />
<!-- 等效于 -->
<HelloWorld :number="inputVal" @change="data=$event" />
复制代码
效果

vue3的情况

v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个modelValue属性和onUpdate:modelValue事件。

子组件 Comp.vue
<script setup>
import { ref, } from 'vue'
 const props =  defineProps({
    modelValue: Number
  })
 
 const emits = defineEmits(['update:modelValue']);
  
  const change = (val) => {
    emits('update:modelValue', val)
  }
</script>
<template>                             
  <button @click="change(props.modelValue -  1)">
    -
  </button>
  <span>{{props.modelValue}}</span>
  <button @click="change(props.modelValue +  1)">
    +
  </button>
</template>
复制代码
父组件App.vue
<script setup>
import { ref, getCurrentInstance } from 'vue'
 import Comp from './Comp.vue'
 
const msg = ref(123);
 const internalInstance = getCurrentInstance();
  console.log(internalInstance)
 
</script>
 
<template>                             
  <Comp v-model="msg"></Comp>
  等效于
  <Comp :modelValue="msg" @update:modelValue="msg = $event"></Comp>
</template>
复制代码
结果
虚拟dom分析

vue3 的查看虚拟dom的使用方式,是使用``getCurrentInstance`来查看, 里面的children中的props中来查看属性传递

区别

vue2和vue3都有v-model,原理都是生成一个属性和一个事件,但是也存在些区别 , 区别如下:

.sync修饰符

vue3中的.sync修饰符是去掉了的,他的功能可以由v-model的参数替代

例如:

<!-- vue2 -->
<Comp :title="inputVal" @update:title="inputVal = $event" />
<!-- 简写为 -->
<Comp :title.sync="inputVal" />
 
<!-- vue3 -->
<Comp :title="inputVal" @update:title="inputVal = $event" />
<!-- 简写为 -->
<Comp v-model:title="inputVal" />
复制代码
多个v-model

vue3中允许你写多个v-model,这也是强烈的说明了,v-model就是一个语法糖,只是帮你减少了代码量,仅此而已。vue2不能写多个v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
 
<!-- 是以下的简写: -->
 
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>
复制代码
##v-model 的修饰符不同

vue2.x是自带的修饰符,但是在3.x的版本中,可以自定义修饰符哦 .在3.x中的修饰符会在当作属性传递给子组件,并且在属性中生成一个modelModifiers的属性。存在这个修饰符就会有对应的修饰符,并且是true,如果没有传递,那就是undefined。

示例代码:

修改子组件Comp.vue

<script setup>
import { ref, } from 'vue'
 const props =  defineProps({
    modelValue: Number,
    modelModifiers: { 
      default: () => ({})
    }
  })
 
 const emits = defineEmits(['update:modelValue']);
  
  const change = (val) => {
    // 如果存在修饰符range2,那就多加1,减法就没有效果
    if(props.modelModifiers.range2){
      val ++;
    }
    emits('update:modelValue', val)
  }
</script>
<template>                             
  <button @click="change(props.modelValue -  1)">
    -
  </button>
  <span>{{props.modelValue}}</span>
  <button @click="change(props.modelValue +  1)">
    +
  </button>
</template>
复制代码

父组件使用

复制代码

效果

相关文章
|
13天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
30 7
|
13天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
33 1
|
13天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
34 1
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
191 0
Vue父子组件传值(porvide+inject实现组件通信)
|
JavaScript 前端开发
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
89 0
前端-vue基础63-非父子组件传值
|
JavaScript
Vue父子组件传值通讯,超详细注释
Vue父子组件传值通讯,超详细注释
237 0
|
JavaScript 开发工具 git
23、vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。 Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1、父组件向子组件传值 (1)第一个就是要明白怎么在父页面中向子组件中传值? 你可以给子组件传入一个静态的值: 图片来自vue官网 但我们一般都是需要传动态的值,所以需要v-bind绑定: 图片来自vue官网 当然,你传的值可以是数字、对象、数组等等,参见vue官网。
1149 0
|
JavaScript
初识 Vue(15)---(父子组件传值)
父子组件传值 示例:父组件向子组件传递数据 在 Vue 中 ,父组件向子组件传值,通过属性的方式来进行传递 父子组件传值 var counter ={ p...
1221 0