vue中的v-model刨根问底

简介: 关于v-model用过vue的应该都知道,用着那是相当的丝滑,但很多人可能并没有深究过其原理,而且随着vue版本的更新,也有些新的用法被大家遗漏,所以就有了这一篇对v-model的刨根问底

vue中的v-model刨根问底

关于v-model用过vue的应该都知道,用着那是相当的丝滑,但很多人可能并没有深究过其原理,而且随着vue版本的更新,也有些新的用法被大家遗漏,所以就有了这一篇对v-model的刨根问底。

v-model的前世今生

v-model是vue中的一个指令,可以在表单控件或者组件上创建双向绑定。

实际上它只是一个语法糖,vue会自动在元素或者组件上添加value属性和input事件

<!-- vue表单控件写法 -->
<input v-model="val" />
<!-- 等价于 -->
<input :value="val" @input="($event) => val = $event.target.value" />


<!-- vue组件写法 -->
<MyComponent v-model="val" />
<!-- 等价于 -->
<MyComponent :value="val" @input="(e) => val = e" />

在input之类的表单控件上使用大家都很熟悉,但很多人可能会遗漏掉v-model在自定义组件上的使用。

在子组件中,通过props中的value来接收父组件中传的值,同时可以通过 $emit('input', e) 来同步更改父组件中的值。

可能也就是上面这个约定的value和input事件限制了大家在组件上的使用,在实际开发中value和input这两个名字可能并不能很好的表达我们的语义(vue后面的版本已经帮我们解决掉这个问题了)。

在组件中使用v-model通过props接收值和$emit传值,同我们自己在父组件上绑定一个属性和$emit传值可以少一步在父组件中监听@input的操作,所以在组件使用v-model也是很丝滑的。

vue 2.2.0版本新增的model组件选项

默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但很多时候我们并不想用这两个名字,在vue 2.2.0版本就新增了model组件选项,允许一个自定义组件在使用 v-model 时定制 prop 和 event:

// my-child
<script>
export default {
   
  model: {
   
    prop: 'city', // 对应父组件中绑定的属性(即子组件中接收的props)
    event: 'change'// 对应父组件中监听的事件(即子组件中的$emit)
  },
  props: {
   
    city: {
   
      type: String,
      default: '深圳'
    }
  }
}
</script>
<my-child :city="curCity" @change="(value) => curCity = value" />

v-model在开发中的一些应用

  • 最常用的表单控件双向绑定
  • 自定义组件数据传值双向绑定
  • 在iview之类的UI框架中组件二次封装,如根据业务二次封装弹窗 Modal 组件,可以直接用v-model来控制显隐(注意iview的Modal组件是一开始就渲染在父组件中的,通过display:none隐藏了,所以不能用Modal的created生命周期来做数据初始化,要自己监听value的变化来做相应的初始化逻辑)

v-model的亲戚sync和update

vue从1.0版本就提供了.sync 绑定修饰符,组件 prop 默认是单向绑定的,加上 .sync 后会把子组件的 prop 属性同步回父组件。

但是vue 2.0里为了避免对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定,所以次修饰符被无情地移除了。

这个世界就是这么奇妙,不知是不是大家一致反馈双向绑定太丝滑了,vue 2.3.0+ 又把 .sync 以编译时语法糖的形式新增回去了:

// my-child
<script>
export default {
   
  props: {
   
    city: {
   
      type: String,
      default: '深圳'
    }
  },
  methods: {
   
    changeCity() {
   
      this.$emit('update:city', '东莞')
    }
  }
}
</script>
<!-- .sync 修饰符写法 -->
<my-child :city.sync="curCity" />
<!-- 等价于 -->
<my-child :city="curCity" @update:city="(value) => curCity = value" />

天下大势,合久必分,分久必合,在最新的 vue 3.0 版本中,.sync 修饰符又被无情地移除了,且听下面部分更加精彩的分析。

vue 3 中的v-model

对于.sync 修饰符再次被移除,江湖众说纷纭,实际上也没那么玄乎,仅仅是它的功能都被亲戚v-model全盘收编了,它也就跟35岁的程序员一样被光荣劝退了。

在 Vue 2.0 发布后,开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop,他们就不得不使用 v-bind.sync。此外,由于v-model 和 value 之间的这种硬编码关系的原因,产生了如何处理原生元素和自定义元素的问题。
在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 v-model。
在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。

1、vue 3 中单独区分出了组件v-model

组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件:

<!-- 组件v-model写法 -->
<my-child v-model="city" />

<!-- vue 1 和 vue 2 中等同于 -->
<my-child :value="curCity" @input="(value) => curCity = value" />

<!-- vue 3 中等同于 -->
<my-child :model-value="curCity" @update:model-value="(value) => curCity = value" />
<my-child :modelValue="curCity" @update:modelValue="curCity = $event" />

2、vue 3 中组件上可以绑定多个v-model

v-model可以接收参数,并且可以绑定多个值(这个王炸就直接干掉了.sync),向下面这样:

<my-child v-model:city="curCity" v-model:country="curCountry" />

<!-- 等价于 -->
<my-child
  :city="curCity"
  :country="curCountry"
  @update:city="curCity = $event"
  @update:country="curCountry = $event"
/>

在子组件中通过 $emit('update:city', e)、$emit('update:country', e)来更改父组件中的值

vue 3 中新增了一个emits选项**:和现有的 props 选项类似,这个选项可以用来定义一个组件可以向其父组件触发的事件。props作为传入,正好可以用emits来对应作为传出,并且也合props一样支持传出参数的校验,vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明。

目录
相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
25天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
126 64
|
25天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
106 60
|
4天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
25天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
29 8
|
24天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
26 1
|
24天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
34 1
|
25天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能