vue2、vue3中自定义v-model的使用和区别

在我们的日常开发中，时常需要写一些自定义组件，而其中可能就会使用到v-model，v-model是Vue中的一个指令，用来实现数据的双向绑定，实现数据、视图更新，v-model是一个语法糖，，我们可以自定义v-model指令的部分内容。

vue2中自定义v-model

在vue2中想要自定义v-model，我们需要在组件中设定model变量

export default {name:'SlideOption',model:{ // 激活的下标值prop:'activeIndex',event:'update'},props: {slides: {type: Array,default() {return ['广场','我的圈子','话题']}},activeIndex:{ // 用来获取当前活跃的按钮下标值type:[String,Number],default:0}},methods: {changeIndex(index){this.$emit('update',index) // 通过该事件更新绑定的值}}
}

然后父组件引入该子组件后，v-model绑定对应的变量即可，子组件中触发changeIndex事件即可使这个绑定的值slideIndex发生变化

<SlideOption v-model="slideIndex"></SlideOption>

vue3中自定义v-model

在vue3中想要自定义v-model，我们不在需要在组件中设定model变量了

export default {name:'SlideOption',props: {slides: {type: Array,default() {return []}},activeIndex:{ // 用来获取当前活跃的按钮下标值type:[String,Number],default:0}},setup(context) {const changeIndex = (index) => {context.emit("update:activeIndex", index);}const changeSlides = (info) => {context.emit("update:slides", info);}return {changeIndex,changeSlides }}
}

父组件中引入子组件，绑定值

<SlideOption v-model:activeIndex="slideIndex" v-model:slides="slideInfo"></SlideOption>

vue2、vue3中自定义v-model的使用区别

vue2中只允许在组件上使用一个 model，vue3中双向数据绑定的 API 标准化，组件上允许使用多个model。

vue2、vue3中自定义v-model的使用和区别相关推荐

手把手教你在 Vue3 中自定义指令
TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮:如果用户不具备对应的权限,那么按钮 ...
vue3中自定义组件使用v-model
vue2 中的v-model v-model本质上是一个语法糖,如下代码 <input v-model="test"> <!--上面代码本质上就是下方代码--&g ...
Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听
watch监听在vue2和vue3中的用法详解(全) Vue2中的watch用法 Vue3中的watch用法首先写一个vue页面 <template><div><h1& ...
Vue3中自定义ref
文章目录使用ref 使用customRef自定义ref 使用ref main.js import { createApp } from 'vue' import App from './App.vu ...
SpringMVC框架中ModelAndView、Model、ModelMap的区别与使用
1. Model Model 是一个接口, 其实现类为ExtendedModelMap,继承了ModelMap类. public class ExtendedModelMap extends Mode ...
vue2.0中的：is和is的区别
此文首发于 https://lijing0906.github.io/ 最近,工作之余在翻阅vue.js的官方文档,在查看到动态组件和解析 DOM 模板时的注意事项的时候,讲到一个特殊的is特性,觉得 ...
odoo 新API装饰器中one、model、multi的区别
在阅读本文章前,如果对one.model.multi装饰类不清楚的同学,可以参考本人前几篇文章. 1.one装饰器详解 odoo新API中定义方式: date=fields.Date(string=& ...
黑马前端Vue2+Vue3全套视频教程上新！500+集资源免费领
互联网发展至今,前端工程师以其高需求量和高薪酬成为IT行业职场新贵. 走进现代前端开发行业,播妞发现,每一位前端开发人员都面临着一个重要决策,选择一个合适的框架. 这时,更符合时代大势所趋的前端框架 ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...

vue2、vue3中自定义v-model的使用和区别

vue2中自定义v-model

vue2、vue3中自定义v-model的使用和区别相关推荐

最新文章

热门文章