众所周知,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. DataTable RowFilter 过滤数据

    用Rowfilter加入过滤条件 eg: string sql = "select Name,Age,Sex from UserInfo"; DataTable dt = Data ...

  2. NPOI 生成 Excel

    前言 ​ 在 c# 中可以使用对应的com组件生成或操作excel,但前提是必须安装了Office Excel , 但服务器端不一定会安装Excel,而且它操作起来并不简单.但是,使用NPOI这个第三 ...

  3. LINUX中文件描述符传递

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  4. SpringXML方式配置bean的懒加载lazy-init

    lazy-init(懒加载),表示该bean在容器初始化的时候不进行初始化. 例如: <bean name="role1" class="com.fz.entity ...

  5. LeetCode之Regular Expression Matching

    [题目描述] Implement regular expression matching with support for '.' and '*'. '.' Matches any single ch ...

  6. [转载]latex插入两栏的图形或表格

    转载自:http://blog.csdn.net/huilingwu/article/details/51649250 latex进行两栏排版时,有时会遇到一些宽度较大的图形或表格,没办法挤在一栏中, ...

  7. Python面向对象 --- 新旧式类、私有方法、类属性和类方法、静态方法

    一.Python面向对象中的新旧式类 1)新式类(推荐使用):在定义类时,类后边括号里要继承基类(object).在python3.x中若没有指定父类,会默认使用的是object作为基类:在pytho ...

  8. WIN7不能上网

    http://zhidao.baidu.com/link?url=lYL0Sti_nX3JDz3pA3cVh49nyYDEQBJ6P5fxwB4La0FurHlgmWGMdgfMGjQSWxj17sH ...

  9. Unity3D使用溶解技术解决障碍物遮挡

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  10. TCP 和 UDP 的区别( 面向连接 和 面向无连接 )

    第一:TCP 和 UDP 的区别( 面向连接 和 面向无连接 ) TCP---传输控制协议,提供的是面向连接.可靠的字节流服务.当客户和服务器彼此交换数据前,必须先在双方之间建立一个TCP连接,之后才 ...