众所周知,Vue.js一直使用的是单向数据流的,和angularJs的双向数据流相比,单向数据流更加容易控制。Vue.js允许父组件通过props属性传递数据到子组件。但是有些情况下我们需要在子组件里改变父组件传递的数据,有2种方法可以实现:

  1. 传递Object对象子组件

    父组件传递Object对象到子组件,子组件可修改父组件传递的Object对象的属性,在父组件内可接收到改变的属性。

  2. 使用官方推荐的方法在属性后加 .sync修饰符

    

     在页面上只需要这样写就行了:

      

    其实是以一种事件冒泡的形式去更新数据的,只不过这种操作是由Vue自己去做的。

Vue.js实现数据的双向数据流的更多相关文章

  1. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  2. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  3. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  4. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  5. js实现数据视图双向绑定原理

    这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...

  6. vue.js 请求数据

    VUE.JS var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function( ...

  7. vue.js + ajax 数据加载(纯新手get)

    似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...

  8. vue.js--基础 数据的双向绑定

    所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle 下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值 ...

  9. vue 组建实现数据的双向绑定

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

随机推荐

  1. uva 12356 Army Buddies 树状数组解法 树状数组求加和恰为k的最小项号 难度:1

    Nlogonia is fighting a ruthless war against the neighboring country of Cubiconia. The Chief General ...

  2. mac下解决mysql乱码问题

    问题描述:在window平台下面数据库插入.已经查找都是很正常的,但是到mac下面查找.插入就不正常了,之后感觉是mysql的问题然后网上搜索学习了下,果然是mysql的问题.解决方案:首先你要先去看 ...

  3. d3.js(v5.7)的比例尺以及坐标轴

    直接上代码了,这里的一些函数用的是之前我自己封装的函数(包括attr的obj支持和节点数量和数据数量的自动匹配),若有不明白的,可以查看之前的博客: 页面的效果如下: 接下来继续添加坐标轴: 最终:

  4. Shell 命令行统计 apache 网站日志访问IP以及IP归属地

    Shell 命令行统计 apache 网站日志访问IP以及IP归属地 我的一个站点用 apache 服务跑着,积攒了很多的日志.我想用 shell 看看有哪些人访问过我的站点,并且他来自哪里. 因为日 ...

  5. java作业调度框架Quartz

    在软件开发中,很多时候需要在特定时间的时间执行某些操作,比如每天的凌晨三点.每周的周日.每个月的15号,Apache Quartz就是一个开源的作业调度框架,可以让计划的程序任务一个预定义的日期和时间 ...

  6. 图像和流媒体 -- Sapera 安装遇到的问题

    一.下载安装包 参看:Genie Nano M1930-NIR 点击软件及例程下载 二.安装遇到的问题 (1)Installation directory must be on a local har ...

  7. opencv 图像增强

    Mat src= imread( "D:\\OCR\\Debug\\Temp\\Rects\\wholeMat_00191_0_0.jpg"); Mat dest; Mat ker ...

  8. 【剑指offer】字符串转换为数字,C++实现

    # 题目 把字符串转换成整数 # 思路 1.功能测试 正数/复数/0 2.边界值测试 最大的正整数/最小的负整数(数据上下溢出) 3.特殊输入测试 空字符串""的处理,返回0,设置 ...

  9. 【Python学习】Thread笔记(1)

    Python学习笔记 - Thread(1) 标签(空格分隔): python from threading import Thread num = 2000 id_list = [] def do_ ...

  10. linux自学(四)之开始centos学习,网络配置

    上一篇:linux自学(三)之开启虚拟机 安装好镜像之后,重启之后需要登录,我这里直接是root账号直接登录的,注意:输入密码的时候不显示. 之后输入ifconfig最常用的命令来查看网卡信息,出现c ...