首页 > 其他分享 >vue3踩坑记录

vue3踩坑记录

时间:2022-11-26 11:33:05浏览次数:84  
标签:自定义 记录 修饰符 sync vue3 model modelValue

Vue Grid Layout -️ 适用Vue.js的栅格布局系统

'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.eslint-plugin-vue

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

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>
<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"
/>

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

<ChildComponent v-model.capitalize="pageTitle" />

 

     

标签:自定义,记录,修饰符,sync,vue3,model,modelValue
From: https://www.cnblogs.com/Merrys/p/16926975.html

相关文章

  • easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(三)日志输出
    目录Writer析构函数Writer::processDispatch接口Writer::triggerDispatch接口base::LogDispatcher::dispatch接口DefaultLogDispatchCallback::handle接口DefaultLogD......
  • easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(二)writer对象的创建以
    目录构造函数construct接口initializeLogger接口在easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(一)宏展开中我们对CLOG宏展开了,今天来看看日志记录宏中......
  • Atlassian-bitbucket RCE (CVE-2022-43781) 漏洞分析记录
    前言距离上次写文章居然过去两年多了,这两年多忙于各种事务,环境搭建官方仓库维护了各种版本的Bitbicket,我们根据漏洞描述选择一个可以触发漏洞的版本即可。然后根据镜像......
  • easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(一)宏展开
    目录Info日志宏CLOG(INFO,xxx)Trace日志宏CLOG(TRACE,XXX)Debug日志宏CLOG(DEBUG,XXX)Fatal日志宏CLOG(FATAL,XXX)Error日志宏CLOG(ERROR,XXX)Warning日志......
  • 记录人生的第一次满分
      嗡嗡嗡嗡嗡嗡问啊离开家;卢卡斯的的浪费空间;离开家安德森分厘卡士大夫了剖哈审批u的话放屁u啊是的覅欧鸿i就哈哈哈我第一次满分,发生在一次普通的周赛!~!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!......
  • Vue3
    helloworld<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewpo......
  • 记录一下开启SSH KyLin
    1:配置SSH参数vim/etc/ssh/sshd_config将#PasswordAuthenticationno的注释去掉,并且将NO修改为YES//kali中默认是yes将PermitRootLoginwithout-password修......
  • MyISAM表delete记录恢复
    标题:MyISAM表delete记录恢复作者:惜分飞©版权所有[未经本人同意,不得以任何形式转载,否则有进一步追究法律责任的权利.]有客户delete删除了myisam表中的部分数据,本来表......
  • Git整理提交记录
    前言开发人员有时会说“我想要把这个提交放到这里,那个提交放到刚才那个提交的后面”,而接下来就讲的就是它的实现方式。gitcherry-pick命令形式为:gitcherry-pic......
  • [dp 记录]P3349 [ZJOI2016]小星星
    绝世容斥好题,刚好NOIp前要复习容斥,就拉过来当100紫了。祝自己明天的NOIprp++这题好久前看过题解,感觉好可惜,浪费了好题。以后自己不会的题也不能看题解了。题意:......