Vue的 .sync修饰符

最新推荐文章于 2024-08-12 22:28:07 发布
最新推荐文章于 2024-08-12 22:28:07 发布
阅读量135 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c0dbb606fb9a049f570f764
版权

在父组件向子组件传值时，用到了.sync。之前看到其他地方用过这个修饰符，今天具体学习了一下。

// 父组件
<funnel-chart :chart-type.sync="chartType"/>

// 子组件
this.$emit('update:chartType', type);
复制代码

之前父子组件传值的时候，一般使用的都是$emit。

在一些情况下，我们可能会需要对一个prop（父子组件传递数据的属性） 进行“双向绑定”。

在vue 1.x中的.sync修饰符所提供的功能。当一个子组件改变了一个带.sync的prop的值时，这个变化也会同步到父组件中所绑定的值。 这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）

由于子组件改变prop的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。

这在debug复杂结构的应用时会带来很高的维护成本。于是我们在vue 2.0中移除了.sync。

但是在实际应用中，我们发现.sync还是有其适用之处的，比如在开发可复用的组件库时。

我们需要做的只是 让子组件改变父组件状态的代码更容易被区分。

于是从vue 2.3.0开始，我们重新引入了.sync修饰符，但是这次它只是作为一个编译时的语法糖存在。他会被自动扩展为一个  自动更新父组件属性的v-on监听器。

<funnel-chart :chart-type.sync="chartType"/>

// 就会被扩展为

<funnel-chart :chart-type="line" @update:chart-type="val =>line = val"/>
复制代码

转载于:https://juejin.im/post/5c0dbb606fb9a049f570f764

weixin_33713350
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue .sync修饰符用法
weixin_45032067的博客
10-25 732
vue .sync修饰符用法
vue .sync修饰符的使用详解
08-27
Vue .sync 修饰符的使用详解 Vue .sync 修饰符是一种特殊的修饰符，它可以实现父组件和子组件之间的双向绑定。该修饰符可以将子组件中的某个 prop 属性同步到父组件中，从而实现了父子组件之间的数据交互。 在 Vue...
vue组件中的.sync修饰符使用
weixin_42893515的博客
08-06 2365
我们知道，在vue的组件通信props中，一般情况下，数据都是单向的，即父组件数据的更改会下传到子组件（用了.once除外），子组件对数据无法做出更改（当传递的数据是引用数据类型时，可以更改父组件数据，比如，数组的破坏性方法，push等）。在vue1.x时，提供.sync作为双向传递的关键字，但是2.0删除了该修饰符，但是！！2.3+又恢复了使用，采用的事件机制。下面我就简述一下怎么使用。 使用...
数据同步（复制）子系统
qq_47551047的博客
09-12 332
数据同步子系统MySQL高可用方案单点方案数据同步（复制）子系统Federated引擎开发基于Federated引擎的刷新同步模块参数意义开发基于Federated引擎的增量同步模块 MySQL高可用方案 单点方案 数据同步（复制）子系统 Federated引擎 介绍 开发基于Federated引擎的刷新同步模块 就是要将不同的Master中的数据，复制下来，但是要注意，从Master复制过来的字段名有可能和我的数据库需要的字段名是不一样的，所以也是一个参数。 参数意义 struct st_arg {
Parameter ‘syncType‘ not found. Available parameters are [arg1, arg0, param1, param2]
qq_42152399的博客
06-04 251
mybatis 报错
vue中的.sync修饰符用法及原理详解
热门推荐
liushijun_的博客
06-16 3万+
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。 或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。 例如： //父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mo...
vue .sync修饰符
wsx1212123的博客
11-22 1008
日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。 首先我们知道，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信，通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。比如向下边这这样： 子组件使用$emit向父组件发送事件： this.$emit('update:title', newTitle) 父组件监听这个事件
vue .sync 修饰符对对象进行双向绑定
wallace_yang的博客
12-19 440
vue .sync 修饰符对对象进行双向绑定
vue 之 .sync 修饰符示例详解
08-27
vue 之 .sync 修饰符示例详解 在 Vue 框架中，`.sync` 修饰符是一个非常重要的概念，它主要用来实现父子组件之间的双向数据绑定。在本文中，我们将详细介绍 `.sync` 修饰符的相关知识，包括其原理、使用方法和注意...
如何理解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',...
Android 同步框架的使用
奋斗
08-03 4764
本文从使用角度上介绍了如何创建和使用android 账户同步框架，大部分是官方文档资料，但是有些小坑需要注意。 总体上，使用账户同步需要实现两部份代码，一是创建账号，二是创建同步适配器。创建账号之前，需要创建一个账号类型让系统知道，系统通过查找所有app的service来更新自己的账号类型，创建账号时，就会查找和使用此类型。同样，在调用同步代码时，系统通过查找所有app的service来确定同步器
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 467
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 618
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
song854601134的博客
08-12 121
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 317
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 415
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 447
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Vue3】图片未加载成功前占位
菜就多练
08-08 332
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
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、付费专栏及课程。

余额充值