• 售前

  • 售后

热门帖子
入门百科

vue中的.sync修饰符

[复制链接]
刘久田 显示全部楼层 发表于 2022-8-18 23:34:26 |阅读模式 打印 上一主题 下一主题
文章目次



引申

vue中的数据转达一样寻常是单向数据流,即父组件数据通过props转达给子组件。但是子组件可以通过自界说事故间接修改父组件中的数据,这种方式接纳了发布订阅模式。
举个例子:
  1.     父组件中的的num是{{ num }}<br/>
  2.    
  3.     <son @addnum="add"></son>
  4. <template id="son">
  5.     <button @click="changeNum">改变父组件中的num</button>
  6. </template>
复制代码
留意: 这里的自界说事故名称addnum必须要使用小写方式,不能用驼峰方式。差别于组件和 prop,事故名不会被用作一个 JavaScript 变量名或 property 名,以是就没有来由使用 camelCase 或 PascalCase 了。而且 v-on 事故监听器在 DOM 模板中会被自动转换为全小写 (由于 HTML 是巨细写不敏感的),以是 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不大概被监听到。
因此,我们保举你始终使用 kebab-case 的事故名。
@update:自界说的属性名

由于子组件也能修改父组件中的数据,上面引申内容已经实现。在父组件和子组件两侧都没有显着的变更数据泉源,以是此时我们可以通过update:myPropName 的模式触发事故取而代之。
举个例子:
  1.     父组件中的的num是{{ num }}<br/>
  2.     <son :num="num" @update:addnum="num = $event"></son>
  3. <template id="son">
  4.     <button @click="changeNum">改变父组件中的num</button>
  5. </template>
复制代码
大概上面这个例子可以改写成下面如许:
  1.     父组件中的的num是{{ num }}<br/>
  2.     <son :num="num" @update:addnum="num = $event"></son>
  3. <template id="son">
  4.     <button @click="changeNum">改变父组件中的num</button>
  5. </template>
复制代码
.sync修饰符

.sync修饰符是@update:自界说属性名的语法糖
举个例子:
  1.     父组件中的的num是{{ num }}<br/>
  2.     <son :num="num" @update:addnum="num = $event"></son>
  3. <template id="son">
  4.     <button @click="changeNum">改变父组件中的num</button>
  5. </template>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作