v-model和sync修饰符
场景:
在用vue开发的过程中我们经常会遇到父子组件共用同一变量的情况,那么在这种情况下,我们肯定会想直接 把变量传过来用,因为是双向绑定的所以子组件就会修改这个变量,这样在vue中时会报错的。
问题:
对于这种问题,我们就可以在父组件中用v-model或者是用一个属性加上sync修饰符并在子组件使用$emit('input',v)或者$emit('x:update',v)来解决,但是这两个东西到底有什么区别呢?
结论:
个人认为两者只是语法上的区别,以此来实现两个组件之间数据的双向绑定,sync更加灵活一点,如果是v-model的话在子组件就只能用value来接这个参数了,而sync可随意
延伸:
官方有哦说道:组件实例的作用域是独立的,这意味着不能(也不该)在子组件的模板内引用父组件的数据,父组件的数据需要通多prop才能下发到子组件中。
v-model和sync修饰符的更多相关文章
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- 使用sync 修饰符------子组件内部可以修改props
首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- 深入理解.sync修饰符
原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...
- [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”
一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...
- vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
随机推荐
- Powershell 脚本调用方法
方法一: Get-Content "D:\PowershellScripts\Test\ErrorMailNotice.ps1" | Invoke-Expression 方法二: ...
- sqlalchemy(二)高级用法 2
转自:https://www.cnblogs.com/coder2012/p/4746941.html 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此 ...
- 【sed / awk脚本编写】
awk awk分为BEGIN部分,正则匹配部分,END部分三部分. 我一般在BEGIN部分定义一些变量,正则部分用于匹配和执行一些解析和统计,END部分用于输出结果. 总体结构: awk 'BEGIN ...
- web 开发常见问题--Session 与 Cookie 却别
总结: 1.首先,session与cookie都是保存数据的,存在的原因很大程度上是为了解决HTTP协议的无状态特性 2.都是保存数据,却别在于cookie保存在客户端,由浏览器管理,session保 ...
- iOS应用内付费(IAP)开发步骤
1.苹果iTunes Connect内购产品信息录入. 1)创建app内购买项目(Create New),选择类型: 1.消耗型项目 对于消耗型 App 内购买项目,用户每次下载时都必须进行购买.一次 ...
- Linux Shell编程 exit、break、continue
exit语句 在系统中exit 命令用于退出当前用户的登录状态.在 Shell 脚本中exit 语句是用来退出当前脚本. exit 的语法如下: exit [返回值] 如果在 exit 之后定义了返回 ...
- List To Json
命名空间 using Newtonsoft.Json; 实例代码 /// <summary> /// 将list集合转换为json /// </summary> /// < ...
- AndroidDevTools下载
收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Android设计规范,免费的设计素材等. http://www.androiddevtools.cn ...
- [mongodb] MMAP 和wiredTiger 的比较
mongodb 现在有两款存储引擎 MMAPv1 和 WireTiger,当然了除了这两款存储引擎还有其他的存储引擎了. 如: 内存引擎:现在的mongodb 版本中已经有了,主要的cache 服务 ...
- 为JAXB和response设置编码,解决wechat4j中文乱码
如果有哪一个做程序员的小伙伴说自己没有遇到中文乱码问题,我是不愿意相信的.今天在做微信订阅号的智能回复时,又一时迷乱的跳进了中文乱码这个火坑.刚解决问题时,都欢呼雀跃了,完全忘记了她曾经带给我的痛苦. ...