Vue2系列 — 修饰符.sync

.sync 修饰符以前存在于 Vue1.0 版本里,后来在2.0版本中移除了 .sync 修饰符。
但是在 2.0 发布之后的实际应用中,发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分
从 2.3.0 起重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

1 使用情景

需要父组件给子组件传值
子组件通过 emit 改变该值

2 原写法:

v-bind 传值 money 给子组件
并绑定事件 update:money 改变 money 值

父组件:
<template><div class="app"><Childv-bind:money="total" v-on:update:money="money = $event"/></div>
</template>
子组件:
<template><div class="child">{{ money }}<button @click="$emit('update:money', money - 100)"></button></div>
</template><script>
export default {props: ["money"],
};
</script>

3 为了方便起见,为这种模式提供一个缩写,即 .sync 修饰符:

示例:https://codesandbox.io/s/white-glade-xhj86?file=/src/App.vue

父组件:
<template><div class="app"><Child v-bind:money.sync="total" /><!--  或 <Child :money.sync="total" />   --></div>
</template>

4 需要注意的是

  • 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title +
    ‘!’” 是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 v-model。
  • 当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。

  • 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/156138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Boot】如何运用Spring Cache并设置缓存失效时间

简单描述 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。Spring Cache提供了一层抽象&#xff0c;底层可以切换不同的cache实现。具体就是通过CacheManager接口来统一不同的缓存技术。CacheMan…

JavaScript的学习之BOM和DOM,就这一篇就OK了!(超详细)

目录 Day28 JavaScript(2) 1、BOM对象 1.1 window对象 1.2 Location ( 地址栏)对象 1.3 本地存储对象 2、DOM对象(JS核心) 2.1 查找标签 2.2 绑定事件 2.3 操作标签 2.4 常用事件 Day28 JavaScript(2) 1、BOM对象 BOM:Broswer object model,即浏览器提供我们开发者…

算法学习 day27

第二十七天 美化数组的最少删除数 2216. 美化数组的最少删除数 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int minDeletion(vector<int>& nums) {int len nums.size();if(len 0) return 0;int res 0,cur 0;for(int i 1;i < len;i)…

企业数字化转型所需的数据在哪里找?企业数据运营有什么用?

现阶段&#xff0c;越来越多企业考虑数字化转型。特别是中小型企业&#xff0c;他们察觉到&#xff1a;数字化转型的关键在于数据的运营。只有通过数据的有效管理和不断挖掘&#xff0c;企业才可以更好地了解市场需求&#xff0c;优化业务流程&#xff0c;提高决策效率&#xf…

【设计模式】聊聊职责链模式

原理和实现 模板模式变化的是其中一个步骤&#xff0c;而责任链模式变化的是整个流程。 将请求的发送和接收解耦合&#xff0c;让多个接收对象有机会可以处理这个请求&#xff0c;形成一个链条。不同的处理器负责自己不同的职责。 定义接口 public interface Filter {/*** …

[AutoSar]在Davinci developer中mapping Com interface port

目录 关键词平台说明一、实现步骤1.1 新建一个需要接入Com interface 的SWC1.2 Data mapping1.3 选择SWC和信号为分开的还是group1.4 添加前缀后缀1.5 在SWC中使用 关键词 嵌入式、C语言、autosar 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&…

杭电oj 2053 Switch游戏 C语言

本题用到了异或“^”的性质&#xff1a;0与任何数异或都为该数本身&#xff0c;相同的两个数异或为0&#xff1b; #include <stdio.h>void main() {int n, i, out;while (~scanf_s("%d", &n)){out 0;for (i 1; i < n; i){if (n % i 0)out ^ 1;}pri…

Linux内核分析(十九)--内存管理之Linux中的内存管理机制汇总

目录 一、引言 二、虚拟内存 ------>2.1、linux中的分段与分页 ------>2.2、Linux的内存分配与管理 ------>2.3、vm_area_struct ------>2.4、两部分的页表分配 三、物理内存 ------>3.1、伙伴系统 ------>3.2、slab分配器 ------>3.3、内核态内…

ELK企业级日志分析平台

目录 一、elasticsearch 1、集群部署 2、cerebro部署 3、elasticsearch-head插件部署 4、elasticsearch集群角色分类 二、logstash 1、部署 2、elasticsearch输出插件 3、file输入插件 4、file输出插件 5、syslog 插件 6、多行过滤插件 7、grok过滤 三、kibana数…

微信关键词自动回复有什么用?

微信关键词自动回复有什么用&#xff1f; 关键词回复可以帮助解答客户的高频次问题。 假如&#xff0c;微信可以设置自动回复。。。 你还在担心一个个通过好友手动发欢迎语吗&#xff1f; 遇到常规问题&#xff0c;不用再复制粘贴那个已经回答了一百遍的答案吗&#xff1f;…

新加坡服务器托管-金融企业的选择

新加坡作为一个亚洲金融中心&#xff0c;其优越的地理位置和先进的信息通信技术基础设施&#xff0c;使得其成为了众多金融机构企业选择服务器机房托管的理想地点。金融行业对于服务器的安全性和可靠性要求很高&#xff0c;而将服务器托管在新加坡有许多好处。 首先&#xff0c…

多目标应用:基于多目标粒子群优化算法MOPSO求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、多目标粒子群优化算法MOPSO 多目标粒子群优化算法MOPSO简介&#xff1a; 三、多目标粒子群优化算法MOPSO求解微电网多目标优化调度 &#xff08;1&…

BGP笔记实验

IGP(Interior Gateway Protocol)——内部网关协议 OSPF RIP IS-IS IGRP EIGRP EGP(External Gateway Protocol)——外部网关协议 EGP BGP——边界网关协议 AS——自治系统 由单一组织or机构独立维护的网络设备&网络资源的集合 网络范围太大 自治 AS号 为了区分不同…

电脑监控系统是如何支持远程监控的?

电脑监控系统支持远程监控的方式有多种&#xff0c;以下是其中几种常见的方法&#xff1a; 远程桌面协议 这是一种常见的远程监控协议&#xff0c;它允许用户通过互联网远程访问和控制被监控的电脑。RDP是一种加密的协议&#xff0c;可以保证数据传输的安全性和隐私性。使用RD…

python 实现等声值线图绘制

今天讲一类环评项目的噪声预测 - 风电 风机噪声作为面源目前难有成熟的模型进行预测。根据国内外的研究,都是根据与风机中心的位置进行分级预测。 翟国庆等利用美国航天航空局(NASA)研发的风电机组噪声预测模型(以下简称 NASA”模型),结合国内风机特点和风机噪声实际测…

4. Pandas行列操作

4.1 新增列 4.1.1 assign Pandas中的assign&#xff08;&#xff09;函数不仅可以实现不改变原数据情况下新增列&#xff0c;而且可以同时新增多列&#xff0c;还可以配合链式操作使用一行代码完成多个新增列创建&#xff0c;使得代码非常整洁。 &#xff08;1&#xff09;函…

初识树(c语言)

树 定义&#xff1a;树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 有一个特殊的结点&#xff0c;称为根结点&#xff0c;根节点没有前驱结点 除根节点外&#xff0c;其余结点被分成M(M>0)个互不相交…

如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源

文章目录 如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源**那么问题来了&#xff0c;potplayer只能局域网内访问资源&#xff0c;那我不在家中怎么看本地电影&#xff1f;** 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果…

git撤销某一次commit提交

一&#xff1a;撤销上一次commit提交&#xff0c;但不删除修改的代码 可以使用使用VSCode 二&#xff1a;使用 git reset --hard命令删除提交时&#xff0c;将会删除该提交及其之后的所有更改&#xff08;相当于你想要回滚到的提交的提交ID&#xff09; git reset --hard 版本…

vector容器中push_back()和emplace_back()函数的区别

底层实现区别&#xff1a; push_back()向容器尾部添加元素时&#xff0c;首先会创建这个元素&#xff0c;然后再将这个元素拷贝或移动到容器中&#xff08;如果是拷贝的话&#xff0c;事后会自行销毁先前创建的这个元素&#xff09; emplace_back()则直接在容器尾部创建这个元…