vue中 .sync 的作用

最新推荐文章于 2024-07-03 19:00:00 发布
最新推荐文章于 2024-07-03 19:00:00 发布
阅读量314 收藏 1
点赞数
文章标签： vue java js react sync
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21363577/article/details/122077016
版权
我们使用 vue 编写弹框组件的时候，想要关闭弹窗时往往会写个关闭的方法，子组件$emit，父组件里还要加 @xxx="xxxxx"， 非常的不优雅，现在使用 .sync 就非常方便优雅地控制弹窗显示和隐藏了。 
父组件：

<myModal :show.sync="modalShow" />
//编译时会被扩展为
<myModal :show="modalShow" @update:show="val => modalShow = val" />

可以看出来，.sync 其实就是一个语法糖

子组件：


// 子组件可以通过$emit 触发 update 方法改变
<div  @click="$emit('update:show', false)">关闭</div>
青云码上
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 中的 .sync 修饰符作用
weixin_41715020的博客
07-03 292
一、.sync官方文档 https://cn.vuejs.org/v2/guide/components-custom-events.html 二、作用 开发Vue的应用过程中，父子组件通信的需求是很常见 的：父组件Parent存在属性d，通过参数p传输给子组件Child，我们希望Child组件能改变Parent的属性d。在没有修饰符.sync的情况下，我们的一般方法是这样的： 父组件监听子组件事件update:p,并且将参数p绑定为d 子组件触发update:p事件并...
vue中.sync修饰符的作用
baidu_36095053的博客
05-03 1693
子组件要修改父组件的数据，经常采用采用自定义事件去修改。即$emit，这样一来，父组件就要写上修改属性的方法。如：
vue2升级vue3：Vue3时jsx组件绑定自定义的事件、v-model、sync修
最新发布
qq_24428851的博客
07-03 1074
举例：比如el-popover的v-model绑定visible，那么要把visible这个绑定的prop名称放进数组的第二元素里面，第一个属性放传递给el-popover组件的变量名。，例如v-model:title="pageTitle"改为绑定title值，使用起来也是很方便，但是在jsx里面使用就不是这样了。Vue3 jsx新特性，支持v-model使用，如果组件的v-mdel是modelValue的话，那使用很简单。Vue3中用v-model替代了.sync修饰符和组件的model选项。
vue修饰符.sync的作用
qiuzhf
11-15 399
其实就是在一些特殊情况下（例如分页组件）父子组件“双向绑定时”用到，并且是一个语法糖。 我们在传递一个属性到子组件时，正常情况下，子组件不能直接修改这个属性，修改了控制台会发出警告，这个vue的单项数据流原则，为了就是维护的问题，如果其他子组件也用到了这个属性，就会带来不必要的麻烦，但是在一些特殊情况下，比如分页组件， 我们需要将父组件传来的值修改并回传给父组件，这时候我们正常思路是，在子组件使用...
Vue 中的 .sync 修饰符的作用
weixin_45821809的博客
03-23 1058
Vue 中的 .sync 修饰符的作用
sync命令的作用
热门推荐
jk110333的专栏
06-16 1万+
sync命令的作用是，将有关文件系统的存储器常驻信息送入物理介质内。在暂停系统之前，比如要重新启动机器，一定要去执行sync命令。unix系统运行经验表明，为确保可靠起见，应执行两遍sync命令，这是因为sync命令完成时，并不保证信息实际写到了磁盘上，虽然已经执行了一遍这个命令。在执行sync命令以后，要等待磁盘工作灯灭了（假定有系统工作指示灯的话），再去真正暂停机器的运行或启动机器。
vue 之 .sync 修饰符示例详解
08-27
在 Vue 1.x 中，`.sync` 修饰符可以实现父子组件之间的双向数据绑定，也就是说，当子组件改变了父组件中的某个属性时，这个变化也会同步到父组件中。但是，这个机制也存在一定的问题，因为它破坏了单向数据流的原则...
Vue使用.sync 实现父子组件的双向绑定数据问题
01-21
最近在vue 项目中有一个需求， 就是我需要根据不同的类型在页面中放不同的组件， 组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面 代码会显得比较多，毕竟我当前页面已经7-800行代码了 所以我需要把...
vue .sync修饰符的使用详解
08-27
例如，在 father.vue 中，我们可以使用 .sync 修饰符来实现父子组件之间的双向绑定：<template> <div class="hello"> <input type="text" v-model="wrd"> <box :word.sync="wrd" ></box> </div></template> ...
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-comp',...
.sync作用(带图分析)
qq_20623665的博客
12-27 217
类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。v-model只能用一次；.sync可以有多个。实现父子组件数据之间的双向绑定，与。.sync与v-model区别是。
【Vue】.sync 修饰符作用
qq_45677671的博客
03-11 623
.sync 修饰符简单来说就是实现父子组件数据之间的双向绑定，当子组件修改了一个 `props` 的值时，也会同步到父组件中，实现子组件同步修改父组件，与`v-model`类似。
在Vue中 .sync作用
weixin_63681863的博客
12-08 197
它允许父组件通过v-model或.sync语法来实现与子组件的双向绑定，这样子组件可以修改父组件中传递的值。在这个例子中，location.sync="currentBridge.location"意味着currentBridge.location的变化会影响到pick-point-common组件中的location属性，同时pick-point-common组件中location属性的变化也会同步到currentBridge.location中。
vue中.sync详解
weixin_44424820的博客
07-22 3597
白话理解：一个组件只能定义一个v-model，如果其他的prop也要实现双向数据绑定的效果，简单的方法就是：给子组件绑定一个自定义事件，父组件监听该事件，然后更新prop。但是这种方法又比较麻烦，官网解释：在有些情况下，我们可能需要对一个prop参数进行数据“双向数据绑定”。但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且再父组件和子组件两侧都没有明显的变更来源。带有.sync修饰符的v-bind不能和表达式一起使用，只能传递你想绑定的属性名。就是被设计出来简化这种操作的。
Vue中.sync修饰符的作用
Dax1_的博客
08-27 1728
在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。 但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 :name.sync就是:name="name" @update:name="name =
vue项目开发中.sync 修饰符的作用
木易的博客
05-14 270
官方解释如下： 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。 其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update。 代码如下: 这里父组件，要给子组件传一个title的值 <template> <div> <t-title..
Vue 中的 .sync 修饰符有什么用
小峰同学的前端小屋
06-24 775
Vue 本身是数据驱动渲染，所以数据（包括属性、计算属性等）变化可以触发界面数据呈现，但是界面的输入要反馈给组件，就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖，使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。 比如： 代码<my-comp :foo.sync="bar"></my-comp> 会被扩展成<comp :foo="bar" @update:foo="val => bar =
Vue中sync修饰符的原理和作用
Celester_best的博客
07-07 831
子组件修改父组件变量的两种方式 sync修饰符的使用以及原理
深入解读Vue修饰符sync
weixin_45820444的博客
09-23 1699
  在一些情况下，我们可能会需要对一个 prop （父子组件传递数据的属性） 进行“双向绑定”。   在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。   这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）   由于子组件改变 prop 的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。 <comp :foo
vue中.sync修饰符
08-23
在 Vue 中，.sync 是一个语法糖，它能够简化父子组件之间的数据传递。.sync 修饰符实际上是一个双向绑定的简写形式，它会自动创建一个名为 update:propName 的自定义事件，并且在父组件中监听这个事件，然后更新子组件的数据。 例如，在父组件中使用子组件时，可以通过 v-bind.sync 修饰符将父组件的数据与子组件的数据绑定在一起： ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> </template> ``` 这里的 .sync 修饰符会自动将子组件的 message 属性与父组件的 messageFromParent 属性进行双向绑定，并且在父组件中监听名为 update:message 的自定义事件，以更新父组件的数据。 ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> <button @click="updateMessage">Update Message</button> </template> <script> export default { data() { return { messageFromParent: 'Hello World' } }, methods: { updateMessage() { this.messageFromParent = 'Hello Vue' } } } </script> ``` 在子组件中，可以通过 $emit() 方法触发 update:message 事件，以更新父组件的数据。 ``` <template> <div> <input type="text" v-model="message"> <button @click="$emit('update:message', message)">Update Message</button> </div> </template> <script> export default { props: { message: { type: String } } } </script> ``` 这样，父组件和子组件之间就可以通过 .sync 修饰符实现双向数据绑定了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值