VUE组件3 数据流和.sync修饰符
单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改。防止子组件在无意中修改,改变父级组件状态
然而,双向数据绑定在某些情况下有用。如果想要使用双向数据绑定,可以使用一个修饰符来实现:.sync修饰符。这只是一个语法糖
例:<count-from-number :number.sync = "test"/> 等效于 <count-from-number :number = "test" @update:number"val => numberToD = val />
所以要改变父级组件的值,需要触发update:number事件,示例中的number ---是将要更新的值的名称
如果只想更新prop传过来的值而不关心父级组件的值更新,可以在一开始通过this引用prop的值,将它复制到data中。需要注意的是,如果prop的值更新了,组件内部并不会更新,如果想要更新可以添加一个监听器,来重新赋值。
与.sync相似可以在组件上使用v-model指令来创建自定义输入组件
VUE组件3 数据流和.sync修饰符的更多相关文章
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- 使用sync 修饰符------子组件内部可以修改props
首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...
- vue的.sync 修饰符
很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...
- sync 修饰符在Vue中如何使用
在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
- 深入理解.sync修饰符
原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”
一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...
- vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
随机推荐
- Latex使用过程中的一些总结
本文主要总结在使用Latex过程中遇到的一些问题及解决方案. 一:关于参考文献 1.如何在paper同一处用\cite命令同时引用多篇文献? 用\cite{bibtex1}\cite{bibtex2} ...
- 网络编程 TCP协议:三次握手,四次回收,反馈机制 socket套接字通信 粘包问题与解决方法
TCP协议:传输协议,基于端口工作 三次握手,四次挥手 TCP协议建立双向通道. 三次握手, 建连接: 1:客户端向服务端发送建立连接的请求 2:服务端返回收到请求的信息给客户端,并且发送往客户端建立 ...
- MySQL 事务配置命令行操作和持久化
MySQL 事务配置命令行操作和持久化 参考 MySQL 官方参考手册 提供 5.5 5.6 5.7 8.0 版本的参考手册 https://dev.mysql.com/doc/refman/5.5/ ...
- USACO Protecting the Flowers
洛谷 P2878 [USACO07JAN]保护花朵Protecting the Flowers 洛谷传送门 JDOJ 1009: 护花 JDOJ传送门 Description FJ出去砍木材去了,把N ...
- python--协程知识初识
线程和进程的操作是由程序触发系统接口,最后的执行者是系统:协程的操作则是程序员. 协程存在的意义:对于多线程应用,CPU通过切片的方式来切换线程间的执行,线程切换时需要耗时(保存状态,下次继续).协程 ...
- Linux进程通信的几种方式总结
进程通信的目的 数据传输 一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据 多个进程想要操作共享数据,一个进程对共享数据 通知事 一个进程需要向另一个或一组进程发 ...
- luoguP2039 [AHOI2009]跳棋 巧妙的dp
设\(f[i]\)表示在第\(i\)个格子上弄一个棋子的最小代价,前后扫两遍dp后统计答案即可. 代码 #include<bits/stdc++.h> using namespace st ...
- Redis有效时间设置及时间过期处理
本文对redis的过期处理机制做个简单的概述,让大家有个基本的认识. Redis中有个设置时间过期的功能,即对存储在redis数据库中的值可以设置一个过期时间.作为一个缓存数据库,这是非常实用的.如我 ...
- 使用helm管理复杂kubernetes应用
1. 查看仓库: $ helm repo list NAME URL stable https://aliacs-app-catalog.oss-cn-hangzhou.aliyuncs.com/ch ...
- [Usaco2012 Feb] Cow Coupons
[Usaco2012 Feb] Cow Coupons 一个比较正确的贪心写法(跑得贼慢...) 首先我们二分答案,设当前答案为mid 将序列按照用券之后能省掉的多少排序,那么我们对于两种情况 \(m ...