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双向绑定需要 ...
 
随机推荐
- FineReport----单元格元素(数据列、公式、斜线)
			
一.绑定.插入数据列 数据集字段绑定 二.公式 1.单元 格计算 1.两个单元格(C7,I7)和 2.等于某单元格的值 D7等C7单元格的值 3.C7/8(除) 4.除数被除数为零.空的处理 http ...
 - 关于ajax里边不能识别$(this)的解决方法
			
在ajax外面弄个变量var mythis = $(this),然后在里面用就行
 - 视频流协议HLS与RTMP  直播原理 点播原理
			
小结: 1.HLS原理 视频--->图像.声音分别编码打包切割容器文件ts,建立纯文本索引文件.m3u8--->播放器http下载容器文件.索引文件,播放,下载 基于HLS可以实现直播和点 ...
 - ubuntu-16.04.2-server-amd64.iso
			
w
 - IO 之 File 类
			
位于 java.io 包 用来将文件或者文件夹封装成对象 方便对文件和文件夹的属性信息进行操作 File 对象可以作为参数传递给流的构造函数 构造函数 // 可以将一个已存在的, 或者不存在的文件或者 ...
 - Compilation failed: internal java compiler error
			
在Idea中编译时出现这个错误:Error:java: Compilation failed: internal java compiler error. Information:Using java ...
 - 原!!junit mockito 自定义参数匹配 -- ArgumentMatcher
			
前两天写单元测试的时候,发现一个dao对象 mock成功了,但是调用该dao对象的某个方法时,并没有按照设定的值返回,而是返回null. 但是记得之前也都是这么写没有碰到问题,直接mock对象,调用方 ...
 - Redis2.8配置文件详解(转)
			
add by zhj : 没找到本文的原文.另外,redis配置文件中文翻译 也翻译的不错,可以与本文对照看.两篇文章都是以Redis2.8来介绍的 在Redis中直接启动redis-server服务 ...
 - 使用 Python 编写 vim 插件
			
使用 Python 编写 vim 插件 - 技术翻译 - 开源中国社区 code {margin: 0;padding: 0;white-space: pre;border: none;backgro ...
 - Pycharm在创建py文件时,自动添加文件头注释
			
依次File -> Settings -> Editor -> File and Code Templates -> Python Script 添加以下代码: # -*- ...