Vue中.sync修饰符

最新推荐文章于 2025-07-02 10:36:52 发布

转载最新推荐文章于 2025-07-02 10:36:52 发布 · 130 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/eret9616/p/11018251.html

收录于

当前文章被以下社区和专栏收录：

Vue的组件间通信并不是双向绑定的子组件向父组件通信需要emit。

Vue 中 sync的作用

...

...

此时子组件有一个prop a

父组件有一个data b

子组件中emit('update:a',...args)的时候，
父组件的data b就会同步变化

当父组件的data b变化的时候子组件的prop a 就监测到了变化

实现了父组件中数据b 和子组件prop a的双向绑定。

如果没有这个语法糖

需要写

...

...

子组件emit('update:a',...args) 的时候

会引发父组件中 data b的变化

如果父组件中data b发生变化，子组件的prop a会监测到变化

转载于:https://www.cnblogs.com/eret9616/p/11018251.html

标签

#javascript #ViewUI

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dglf54292

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CANoe基础讲解01：从零开始使用CANoe轻松搭建你的第一个CAN网络

最新发布

车载网络小D的博客

10-19

1496

本文是一篇CANoe软件入门实操指南，逐步演示了如何从零创建并运行一个CAN FD仿真工程。内容包括：启动软件、配置硬件通道与网络、加载DBC数据库、使用CAPL编写仿真节点发送CAN报文，最终启动测量并在Trace窗口中查看通信结果。通过七个清晰步骤，帮助初学者快速掌握CANoe基本操作，完成首个可运行的仿真网络搭建

参与评论您还未登录，请先登录后发表或查看评论

对 vue 修饰符 .sync 的理解

人生代码 ---- 公众号

08-13

908

其实对这个属性有点陌生，一直都好像没怎么用到这个属性，但是就在今天，因为公司现在重构的这个项目是拿着element-ui的组件库改造的组件，变成公司自己的组件，所以当我在使用某一些组件的时候，好像是在使用模态框的时候，我看到的这个属性，特别的好奇，在使用的时候确实这样使用的其实看官网就比较清楚了在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vu...

关于vue中sync修饰符的用法

前端岚枫

02-21

2204

.sync是在vue2.3.1+版本开始使用，在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。在这里用update: myPropName的模式触发事件取而代之，方法如下：子组件触发 this.$emit('update:title', newTitle) 这样父组件可以...

SARAutoFocus.rar_PGA_autofocus matlab_radar_成像_自聚焦成像

本程序是一个基于matlab的雷达SAR成像自聚焦算法，对于学习雷达信号处理的人有帮助。

vue中.sync修饰符的使用及拓展

唱歌去旅行8的博客

03-13

948

官方对于该修饰符的解释是专业的：请点击其实目的就是实现父子组件的双向通信，可以更直接的改变互相共用的参数。那就上个例子：父组件代码： <template> <div> <car-number @car-click="onPickerClicked" :pickerShow.sync="pickerShow" :plateAdd="p...

vue中sync修饰符

hnnd123的博客

06-17

6661

从2.3.0起，Vue重新引入了 .sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。示例一：父组件： <parent :items.sync="data1"></parent> 等同 <parent :items="data1" @update:items="val => data1 = va...

vue中的.sync修饰符用法及原理详解

热门推荐

liushijun_的博客

06-16

3万+

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如： //父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mo...

vue2 中的 .sync 修饰符

计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。

07-02

1003

在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。当使用 :msg.sync="msg" 时，等价于 :msg="msg" @update:msg="msg = $event"因为是在父组件更新值，所以就不是在子组件更新 prop 值了。

vue中的.sync修饰符

最初的梦想

07-26

3779

vue中的.sync修饰符本质上是`@update：自定义事件名`这种方式的语法糖

vuejs sync修饰符

云

11-17

434

按照常规，想要让父组件更新**showDialog**的话，需要这样做 // 子组件 this.$emit('changedialog', false) //触发事件 // 父组件 <child @changedialog="method" :showDialog="showDialog" /> method(value) { this.showDialog = value } 但是，vuejs为我们提供了**sync修饰符**，它提供了一种简写模式也就是 // 子组件 updat

Vue修饰符sync详解

张木期的博客

01-06

4896

首先官方文档没看懂？不急，我们来举个详细讲讲吧在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动

深入理解vue 修饰符sync【 vue sync修饰符示例】

pz1021的博客

09-15

245

#深入理解vue 修饰符sync【 vue sync修饰符示例】在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会

vue 修饰符sync

qq_38757174的博客

08-11

623

vue 修饰符sync 初学vue,学习到修饰符sync,说这个很重要,遂花一天时间搞懂它,安排! 在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）由于子组件改变 prop 的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会

Vue中props .sync修饰符的使用示例

南思琼海

03-13

3333

前文一般情况下我们由父组件传递给子组件的对象并不想在子组件修改对象时改变父组件对象的原数据。这种情况通常在watcher时是使用深度克隆对象供子组件使用，避免某些在数据改变时渲染bug问题但是有一些特殊的得情况需要更新父组件中的数据。这就是下面要说 .sync修饰符正文我们有两个组件父组件 views2 &lt;template&gt; &lt;div&gt; &lt;d...