vue3 v-model变化

概览

就变化内容而言,此部分属于高阶内容:

  • 非兼容:用于自定义组件时,v-model的 prop 和事件默认名称已更改
    • prop:value -> modelValue
    • event:input -> update:modelValue
  • 非兼容v-bind 的 .sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替;
  • 新增:现在可以在同一个组件上使用多个 v-model 进行双向绑定;
  • 新增:现在可以自定义 v-model 修饰符。

在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 model

在 Vue 3 中,双向数据绑定的 API 已经标准化,减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。

2.x 语法

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 和 input 事件:

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果要将属性或事件名称更改为其他名称,则需要在 ChildComponent 组件中添加 model 选项:

<!-- ParentComponent.vue --><ChildComponent v-model="pageTitle" />
// ChildComponent.vueexport default {model: {prop: 'title',event: 'change'},props: {// 这将允许 `value` 属性用于其他用途value: String,// 使用 `title` 代替 `value` 作为 model 的 proptitle: {type: String,default: 'Default title'}}
}

所以,在这个例子中 v-model 是以下的简写:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

使用 v-bind.sync

在某些情况下,我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

如果需要的话,父级可以监听该事件并更新本地 data property。例如:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:

<ChildComponent :title.sync="pageTitle" />

3.x 语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event"
/>

v-model 参数

若需要更改 model 名称,作为组件内 model 选项的替代,现在我们可以将一个 argument 传递给 v-model

<ChildComponent v-model:title="pageTitle" /><!-- 是以下的简写: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 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 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外,现在 3.x 还支持自定义修饰符:

<div id="app"><my-component v-model.capitalize="myText"></my-component>{{ myText }}
</div>

让我们创建一个示例自定义修饰符 capitalize,它将 v-model 绑定提供的字符串的第一个字母大写。

app.component('my-component', {props: {modelValue: String,modelModifiers: {default: () => ({})}},emits: ['update:modelValue'],template: `<input type="text":value="modelValue"@input="$emit('update:modelValue', $event.target.value)">`,created() {console.log(this.modelModifiers) // { capitalize: true }}
})

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中,我们创建了一个组件,其中包含默认为空对象的 modelModifiers prop。

请注意,当组件的 created 生命周期钩子触发时,modelModifiers prop 会包含 capitalize,且其值为 true——因为 capitalize 被设置在了写为 v-model.capitalize="myText" 的 v-model 绑定上。

现在我们已经设置了 prop,我们可以检查 modelModifiers 对象键并编写一个处理器来更改发出的值。在下面的代码中,每当 <input/> 元素触发 input 事件时,我们都将字符串大写。

<div id="app"><my-component v-model.capitalize="myText"></my-component>{{ myText }}
</div>
const app = Vue.createApp({data() {return {myText: ''}}
})app.component('my-component', {props: {modelValue: String,modelModifiers: {default: () => ({})}},emits: ['update:modelValue'],methods: {emitValue(e) {let value = e.target.valueif (this.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}this.$emit('update:modelValue', value)}},template: `<inputtype="text":value="modelValue"@input="emitValue">`
})app.mount('#app')

对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + "Modifiers"

<my-component v-model:description.capitalize="myText"></my-component>
app.component('my-component', {props: ['description', 'descriptionModifiers'],emits: ['update:description'],template: `<input type="text":value="description"@input="$emit('update:description', $event.target.value)">`,created() {console.log(this.descriptionModifiers) // { capitalize: true }}
})

迁移策略

我们推荐:

  • 检查你的代码库中所有使用 .sync 的部分并将其替换为 v-model

<ChildComponent :title.sync="pageTitle" /><!-- 替换为 --><ChildComponent v-model:title="pageTitle" />
  • 对于所有不带参数的 v-model,请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue

<ChildComponent v-model="pageTitle" />
// ChildComponent.vueexport default {props: {modelValue: String // 以前是`value:String`},emits: ['update:modelValue'],methods: {changePageTitle(title) {// 以前是 `this.$emit('input', title)`this.$emit('update:modelValue', title) }}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图灵奖得主(四)

本文转自&#xff1a;本文转自&#xff1a;本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1991年度的图灵奖授予了爱丁堡大学计算机科学系教授罗 宾米尔纳(Robin Milner)。米尔纳是继M.V.Wilkes(1…

sql 日期类型空值等于 1900-01-01

SQL server 中查询&#xff1a;select cast( as datetime) 结果&#xff1a;1900-01-01 00:00:00.000 做为判断条件的话&#xff0c;要注意。不能直接 转载于:https://www.cnblogs.com/meng9527/p/11311765.html

koa洋葱模型

Koa 和 Express 都会使用到中间件 Express的中间件是顺序执行&#xff0c;从第一个中间件执行到最后一个中间件&#xff0c;发出响应如上图 Koa是从第一个中间件开始执行&#xff0c;遇到 next 进入下一个中间件&#xff0c;一直执行到最后一个中间件&#xff0c;在逆序&#x…

图灵奖得主(五)

[1993]斯坦恩斯--"打工"带来的机遇 斯坦恩斯是学数学出身的。1958年他在卡尔顿学院(Carlton College)取 得数学学士学位后进入普林斯顿大学研究生院&#xff0c;用了3年时间就 取得博士学位&#xff0c;其博士论文课题是关于博奕论的。 斯坦恩斯跨进计算机科…

koa后端允许跨域

举个例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width…

python面向对象之继承

面向对象之继承 什么是面向对象的继承&#xff1f; 继承&#xff08;英语&#xff1a;inheritance&#xff09;是面向对象软件技术当中的一个概念。如果一个类别A“继承自”另一个类别B&#xff0c;就把这个A称 为“B的子类别”&#xff0c;而把B称为“A的父类别”也可以称“B是…

美国正面临“人才泡沫”破裂危机?

&#xff08;Jason Lane和Kevin Kinser/文&#xff09;最近&#xff0c;与教育有关的种种问题在美国社会引起了广泛讨论。首先巨额的学生贷款问题&#xff1a;根据美联储纽约分行在2012年11月发布的一份报告&#xff0c;全美学生贷款总额已经达到420亿美元&#xff0c;其中新增…

ngrx学习笔记

什么是ngrx ngrx是Angular基于Rxjs的状态管理&#xff0c;保存了Redux的核心概念&#xff0c;并使用RxJs扩展的Redux实现。使用Observable来简化监听事件和订阅等操作。 在看这篇文章之前&#xff0c;已经假设你已了解rxjs和redux。 有条件的话请查看官方文档进行学习理解。 所…

解决RM删除没有释放空间问题

www172-18-8-12 log]$ df -h Filesystem Size Used Avail Use% Mounted on/dev/vda1 120G 101G 20G 84% /devtmpfs 7.8G 0 7.8G 0% /devtmpfs 7.8G 0 7.8G 0% /dev/shmtmpfs 7.8G 601M 7.2G 8% /run 我删除文件时&#xff0c;直接用的rm 没有加参数lf,结果空间没有释放 文件已经…

.slice(0)

高手代码里看到.slice(0)&#xff0c;查了下这样写的好处&#xff1a; 1.对原数组进行深拷贝&#xff0c;这样进行一系列操作的时候就不影响原数组了&#xff1b; 2.将类数组对象转化为真正的数组对象&#xff1a;var anchorArray [].slice.call(document.getElementsByTagN…

在线课程学习、科研科技视频网站

最近在网络学习课程&#xff0c;发现很多在线课程网站&#xff0c;与大家分享一下。本人新浪博客&#xff1a;http://blog.sina.com.cn/u/1240088994 公开课课程图谱http://coursegraph.com/navigation/ 1. 网易公开课 http://open.163.com/&#xff1b; 网易TED http://…

对html2canvas的研究

介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM&#xff0c;因此它可能不是真实表示的100&#xff05;准确&#xff0c;因为它没有制作实际的屏幕截图&#xff0c;而是根据页面上可用的信息构建屏幕截图。 这个怎么运作 该脚本遍历其加…

[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 -…

亲历2013年TED大会:全球最潮灵感大会

本文转自&#xff1a;http://mooc.guokr.com/opinion/436837/ 本文由《外滩画报》供稿 文/华琪&#xff08;发自美国&#xff09; 编辑/吴慧雯 什么是TED的世界&#xff1f;在这里&#xff0c;你可以轻易发现各种名人出没的痕迹&#xff0c;和各个领域里最具远见卓识和创造…

Java生鲜电商平台-电商会员体系系统的架构设计与源码解析

Java生鲜电商平台-电商会员体系系统的架构设计与源码解析 说明&#xff1a;Java生鲜电商平台中会员体系作为电商平台的基础设施&#xff0c;重要性不容忽视。我去年整理过生鲜电商中的会员系统&#xff0c;但是比较粗&#xff0c;现在做一个最好的整理架构. 设计电商会员体系需…

为什么要上大学?

为了让自己成为更有意思的人。 &#xff08;文&#xff0f;美国圣母大学哲学教授 Gary Gutting&#xff09;再不久&#xff0c;千千万万的大学生又将走完一个学期。他们中的很多人以及他们的家人&#xff0c;可能为刚刚过去的几个月或是几年投入了相当可观的时间、努力以及金钱…

React AntD 表格查看修改时默认选中几行数据

hook定义selectedRowKeys const [selectedRowKeys, setSelectedRowKeys] useState([]); const [selectedRowsState, setSelectedRows] useState([]); 初始化时利用setSelectedRowKeys给selectedRowKeys塞值,时行数据的rowKey的数组。 设置table属性rowSelection <Table…

python面向对象三大特性、类的约束、print带颜色输出及super补充

面向对象三大特性、类的约束、print带颜色输出及super补充 简述&#xff1a; python面向对象的三大特性&#xff1a; 1.继承是一种创建新类的方式&#xff0c;在python中&#xff0c;新建的类可以继承一个或多个父类&#xff0c;父类又可称为基类或超类&#xff0c;新建的类称为…

dayjs也可回显AntD DatePicker的值

遇到的问题&#xff1a;react 使用AntD 表单里有多个RangePicker,查看修改时要回显值。 antd的DatePicker需要的是moment对象。但是项目里引的是dayjs库 解决方式&#xff1a; 方式一:直接多引moment.js库&#xff0c;字符串转moment对象 moment(2022-02) 方式二:不甘心引两…

打造“神犇”是教育的未来吗?

这年头&#xff0c;品学兼优、身怀特长的“神犇”&#xff0c;拼的不仅是天赋异禀和后天努力&#xff0c;更是身后爹妈的钱包&#xff0c;而本该实现社会公平的教育&#xff0c;反而加速和凝固了社会的不公。 高等教育的终极目标真的是造就学业超人吗&#xff1f;《纽约时报》刊…