众所周知,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. JS中call和apply区别有哪些 记录

    一.call和apply区别 传递参数的方式.用法上不同,主要是参数不完全同 (1).B.Function.call(A,arg,arg) 这个例子是讲A对象“调用”B对象的Function(某个具体 ...

  2. 【51nod-1010】因子只含有2 3 5的数

    K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...

  3. ubuntu 14.04安装c++遇到的问题

    这是我在安装c++编译器时遇到的一些问题和解决办法,总结一下希望以后的人能少走弯路 安装g++编译器:sudo apt-get install build-essential build-essent ...

  4. ZOJ 2965 Accurately Say "CocaCola"!(预处理)

    Accurately Say "CocaCola"! Time Limit: 2 Seconds      Memory Limit: 65536 KB In a party he ...

  5. Windows下编译YouCompleteMe流程

    废话 生命在于折腾. 之前不用这个插件的原因: 因为要使这个插件起作用,前前后后需要下载几百MB(win下更是超过了1GB)的东西,包括了Clang编译器,ycmd的c艹源码还有ycm本身的vim s ...

  6. Javascript-- jQuery动画篇(淡入淡出效果)

    淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...

  7. Centos下找不到eth0设备的解决方法

    问题描述: ifconfig命令无法找到eth0设备,且/etc/sysconfig/network-scripts/中只有ifcfg-lo文件,而没有ifcfg-eth0. 临时解决方法一: 使用命 ...

  8. volatile关键字解析(二)

    volatile详解接下来,我们详细讲述一下volatile关键字volatile关键字具有两重语义 保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了某个变量的值,这个新值对其他线程来说是 ...

  9. vs 添加第三方库lib的两种方法

    方法一1.代码: 方法二2.配置: 首先包含头文件 #include “../DuiLib/UIlib.h” 连接器->常规-->附加库目录.即是将lib所在的目录,千万要记得,还要写一处 ...

  10. strip()函数和 split()函数

    一:python strip()函数介绍 函数原型:strip可以删除字符串的某些字符 声明:s为字符串,rm为要删除的字符序列 s.strip(rm)        删除s字符串中开头.结尾处,位于 ...