其实这个就说的很好了。 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. Spring学习笔记--Spring IOC

    沿着我们上一篇的学习笔记,我们继续通过代码学习IOC这一设计思想. 6.Hello类 第一步:首先创建一个类Hello package cn.sxt.bean; public class Hello ...

  2. 智能文件选择列表—— bat 批处理

    智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...

  3. 中州韻输入法框架 ibus-rime 修改样式

    一键命令移植 Gnome-Shell 主题 $ sudo su $ curl -LO https://github.com/lemos1235/Little-Utils/raw/master/gnom ...

  4. 项目报错java.lang.ClassNotFoundException: org.common.SessionListener

    现象:项目报错java.lang.ClassNotFoundException: org.common.SessionListener,并且myeclipse左侧Package Explorer中项目 ...

  5. 微信小程序学习——框架视图层（view）

    视图层是有WXML与WXSS编写的,由组件来进行展示. WXML(WeiXin Markup Language)用于写页面结构的. WXSS(WeiXin Style Sheet)用于页面的样式. 组 ...

  6. elasticsearch ingest node and docker-cluster---quey using sql]

    es-docker-cluster https://stefanprodan.com/2016/elasticsearch-cluster-with-docker/ https://github.co ...

  7. ORACLE network environment

    监听程序 建立网络连接 要建立客户机或中间层连接,Oracle Net要求客户机 下列事项: 运行监听程序的主机 监听程序监视的端口 监听程序使用的协议 监听程序处理的服务名 Hostname/ip ...

  8. LeetCode 617 Merge Two Binary Trees 解题报告

    题目要求 Given two binary trees and imagine that when you put one of them to cover the other, some nodes ...

  9. VPS常用操作（自用）

    1.screen  用来开启进程,关闭ssh或命令行后扔可以继续运行 screen screen -list screen -r xx screen -S PID -X quit 2.mono asf ...

  10. 【PyQt5-Qt Designer】简易的数字键盘输入+简易计算器

    参考如下键盘格式写了一个键盘输入,目前还不能进行运算,后期完善... 效果如下: 完整代码: from PyQt5.QtWidgets import (QApplication,QWidget,QPu ...