其实这个就说的很好了。 sync会自动更新父组件的数据

原本valuechild 的值是222，父页面显示的222，把值传递给子组件 子组件也显示的222， 我点击子组件的按钮 把333传递给父组件，然后自动传递给子组件 造成都变成333

点击之后

都变成333了。说明子组件的值直接传递过去了

sync修饰符的简易说明的更多相关文章

  1. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  2. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  3. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  4. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  5. 深入理解.sync修饰符

    原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...

  6. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

  8. v-model和sync修饰符

    场景: 在用vue开发的过程中我们经常会遇到父子组件共用同一变量的情况,那么在这种情况下,我们肯定会想直接 把变量传过来用,因为是双向绑定的所以子组件就会修改这个变量,这样在vue中时会报错的. 问题 ...

  9. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

随机推荐

  1. mui---开发直播APP

    因项目需要,需要开发一款直播类的APP,采用的技术是MUI,找到的参考文档如下: http://ask.dcloud.net.cn/article/13416

  2. Pthon Matplotlib 画图

    一.普通绘图 import matplotlib.pyplot as plt import numpy as np # 绘制普通图像 x = np.linspace(-1, 1, 50) y1 = 2 ...

  3. ubuntu16.04使用Qt开发ROS

    本文介绍一种Qt下进行ROS开发的完美方案,使用的是ros-industrial的Levi-Armstrong在2015年12月开发的一个Qt插件ros_qtc_plugin,这个插件使得Qt“新建项 ...

  4. spring @Order标记

    @Order标记定义了组件的加载顺序. @Order标记从spring 2.0出现,但是在spring 4.0之前,@Order标记只支持AspectJ的切面排序.spring 4.0对@Order做 ...

  5. Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述

    原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...

  6. iOS引用类型

    强引用, 默认引用类型.被强引用指向的内存不被释放.强引用会对被引用对象的引用计数器+1,从而扩展对象的生命周期. 弱引用, 弱引用是医用特殊的引用类型.它不会增加引用计数器,因而不会扩展对象的生命周 ...

  7. flume 学习总结

    flume 总结 flume 总结 下载配置安装 1 下载 2 配置安装 flume 架构 agent 配置 1 source 配置 11 监听网络端口 12 监控文件 2 channel 配置 3 ...

  8. 一种历史详细记录表，完整实现：CommonOperateLog 详细记录某用户、某时间、对某表、某主键、某字段的修改（新旧值

    一种历史详细记录表,完整实现:CommonOperateLog 详细记录某用户.某时间.对某表.某主键.某字段的修改(新旧值). 特别适用于订单历史记录.重要财务记录.审批流记录 表设计: names ...

  9. Flink -- Keyed State

    /* <pre>{@code * DataStream<MyType> stream = ...; * KeyedStream<MyType> keyedStrea ...

  10. day4_高效处理文件

    read()将文件内容从磁盘中全部读出,放到内存,再给cpu处理,性能低,如果文件量大,很容易内存溢出或卡死. 高效方式: 方式一:一般不用的,代码行多 f = open('users.txt','r ...