vue2.3.0中使用.sync语法糖

最新推荐文章于 2024-04-30 15:52:49 发布
最新推荐文章于 2024-04-30 15:52:49 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue sync
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43076388/article/details/94619605
版权

在 1.x 里，可以使用 .sync 双向绑定数据，也就是父组件或子组件都能修改这个数据，是双向响应的。在 Vue.js 2.x 里废弃了这种用法，目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。

但在Vue.js 2.3.0 版本，又增加了 .sync 修饰符，但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件。

示例代码： 在子组件中首先接受父组件传过来的值
子组件 b.vue
在这里插入图片描述

这里是引用

然后再父组件中引用该子组件时:
父组件a.vue
<addplugin :show.sync=“show” ">

~~

weixin_43076388
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2中.sync的使用和在vue3中.sync的移除后的替代使用
King的博客
03-26 3233
sync。
vue2 .sync语法糖
每天都要努力学习哦~~
09-12 563
sync在 Vue 2 中，.sync语法糖是一个强大而方便的工具，用于实现父子组件之间的双向数据绑定。它可以大大简化代码，并使数据传递更加直观和易于理解。然而，在使用时需要注意一些约定和注意事项，以确保它能够正确地工作。希望这篇文章能够帮助你更好地理解和使用 Vue 2 中的.sync语法糖，提高。
Vue 3 父子组件通信语法糖 .sync 实现
最新发布
qq_40868156的博客
04-30 361
vue3父子组件通信方式,语法糖,vue2,vue3,react,next.js,nuxt.js,vite
浅谈 Vue3 中的 v-model 和 sync 修饰符
weixin_43487782的博客
12-06 7818
很多同学对 Vue 的第一印象就是“响应式”、“双向绑定”等特性，而 v-model 就是实现双向绑定的语法糖，用过 Vue 的小伙伴一定都非常熟悉。但是在 Vue3 中，v-model 发生了一些改动，使得它不再兼容 Vue2 的用法，具体是什么呢，我们一起来看看。 非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改： prop：value -> modelValue； 事件：input -> update:modelValue； 非兼容：v-bind 的 .sync
vue中async和await异步编程
Xwz的博客
04-21 5229
async&await是Promise的语法糖，使用他的目的就是用同步的写法，写异步的操作。async 是“异步”的简写， async 用于申明一个异步的 function，await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。当我们函数中需要返回值是promise对象时通常用async和await简化。 async作为一个关键字放到函数之前，表示函数是异步的函数，异步函数也就意味着该函数的执行不会阻塞后面代码的执行，等as...
vue之 父组件与子组件的 ‘值’ 双向绑定语法糖 ‘.sync’
smalCat的博客
04-11 654
vue中，父子之间的传值称为双向绑定 在实际运用中，我们会在父组件中对子组件传过来的值被动设置一个自定义的事件监听传过来的值 比如 父组件中： <div> 子组件： <child :val='testV' @transfer='onVal'/> </div> methods: { ovVal (val) { this.testV= ...
vue 之 .sync 修饰符示例详解
08-27
从 Vue 2.3.0 开始，`.sync` 修饰符被重新引入，但是这次它只是作为一个编译时的语法糖存在。在编译时，`.sync` 修饰符会被自动扩展为一个自动更新父组件属性的 `v-on` 监听器。例如：<child :foo.sync=”msg”>...
vue .sync修饰符的使用详解
08-27
使用 .sync 修饰符非常简单，只需要在父组件中使用 v-bind.sync 指令，并将其绑定到一个对象上。例如：<text-document v-bind.sync="doc">这将把 doc 对象中的每一个属性作为一个独立的 prop 传递到子组件中，并且在...
Vue使用.sync 实现父子组件的双向绑定数据问题
01-21
最近在vue 项目中有一个需求， 就是我需要根据不同的类型在页面中放不同的组件， 组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面 代码会显得比较多，毕竟我当前页面已经7-800行代码了 所以我需要把...
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
10-15
主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
如何理解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',...
vue3：.sync代替v-model
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
05-23 1254
如果你还不知道 vue2 中的 .sync 修饰符，可以看这里 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.min.js"></script> </head> <body> <div id="vue-sync"> <text-document :title="parentTitl
vue 2.3 更新 组件间的数据“双向绑定“ .sync 修饰符
BookNoteY的博客
08-23 1130
官方文档链接 https://cn.vuejs.org/v2/guide/components-custom-events.html       调用组件 &lt;!--使用.sync 实现双向绑定 使用 v-on 实现自定义事件 在子组件调用自定义的事件--&gt; &lt;page :total.sync="page.total" v-on:pageChange="page.pa...
vue .sync 修饰符
evendetail的博客
11-24 1138
.sync修饰符-子组件改变父组件的状态 子组件向父组件传递参数通过事件接口实现 $on(),$emit()， .sync修饰符与$on(),$emit()区别 .sync修饰符是改变父组件的状态，当子组件与父组件公用状态的时候也会被改变，可以通过从新赋值的形式将父组件传给子组件的状态保存 达到只改父组件视图的效果， $on(),$emit() 只是单独起到传递参数的作用， 代码如下
linux命令 sync,linux sync命令详解
weixin_42385265的博客
05-08 5960
sync命令是Linux下的一个命令，那么它具体语法是什么呢?下面由学习啦小编为大家整理了linux sync命令的相关知识，希望对大家有帮助!linux sync命令说明sync命令是linux下的一个linux同步数据命令linux sync命令格式synclinux sync命令选项--help：显示帮助;--version：显示版本信息。linux sync命令用途更新 i-node 表，...
vue .sync修饰符的用法
badmoonc的博客
09-28 7526
背景： 日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。在此之前，希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信，那就点我先了解下吧 .sync修饰符： 首先我们知道，...
Vue语法糖
weixin_45820444的博客
10-26 2338
  语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。   语法糖对程序员来说是友好的，但对机器本身却不怎么好。语法糖越甜，编译成的二进制也就越麻烦，出错的时候也会带来更多的麻烦。程序员要做的不是尽力避免错误，而是聚焦在快速发现并改正错误。真正以快速方式轻易解决错误
在Vue中使用async函数
热门推荐
比利Billy
01-27 7万+
在Vue中使用async函数async/await语法在生命周期钩子上使用async函数在methods中使用async函数源代码 async/await语法 在ES7标准中新增了async和await关键字，作为处理异步请求的一种解决方案，实际上是一个语法糖，在ES6中已经可以用生成器语法完成同样的操作，但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。 下面是MDN上...
vue2和vue3中async的用法区别、在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令
imkaifan的博客
12-13 2144
vue2和vue3中async的用法区别、在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令
vue中:visible.sync
05-22
`visible.sync` 是 Vue.js 中的一个修饰符，它通常用于自定义组件的双向绑定。在一个自定义组件中，我们可以通过 `props` 属性传递一个值给组件，但如果我们希望在组件内部修改这个值，并且这个修改也要反映到父组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值