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

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

其实是以一种事件冒泡的形式去更新数据的,只不过这种操作是由Vue自己去做的。
Vue.js实现数据的双向数据流的更多相关文章
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- vue.js之数据传递和数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...
- js实现数据视图双向绑定原理
这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...
- vue.js 请求数据
VUE.JS var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function( ...
- vue.js + ajax 数据加载(纯新手get)
似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...
- vue.js--基础 数据的双向绑定
所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle 下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值 ...
- vue 组建实现数据的双向绑定
<!DOCTYPE html><html><head> <style>body { font-family: Helvetica Neue, Aria ...
随机推荐
- java程序设计基础篇 复习笔记 第五单元
1. method header: modifier, return value type, method signature(method name, parameter) method body ...
- log4cpp总结
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- myeclipes快捷键
package com.Test02;//alt+shift+s+s 自动创建toString()//ctrl+ shift+ o 自动导包//* alt+ shift +s+o 有参构造//* a ...
- JQuery遍历CheckBox踩坑记
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false) $(&quo ...
- Spring整合CXF发布及调用WebService
这几天终于把webService搞定,下面给大家分享一下发布webService和调用webService的方法 添加jar包 (官方下载地址:http://cxf.apache.org/downlo ...
- Python中的数据结构 --- 集合(set)
1.集合(set)里面的元素是不可以重复的 s={1,2,3,3,4,3,4} ## 输出之后,没有重复的 2.定义一个空集合 s = set([]) print s,type(s)3 ...
- mac下iterm2快捷方式
mac下iterm2,一些技巧,做个记录,大部分参考别人的加上自己的补充: 其中option + 左右键来跳转单词还是有问题,结果变为[D[C,等我摸索好了再来补充. 窗口 新建tab:⌘ + t 切 ...
- MFC CListControl 点击列头排序的实现
SetItemData可以为每一行绑定一个DWORD类型的变量.用GetItemData可以获得这个变量.举个例子,假设CListCtrl中你需要显示某个数据表中的记录,该表有个流水号主键ID,一般这 ...
- pkcs#5和pkcs#7填充的区别
最近做到了关于加密和解密的部分. 使用算法AES的时候,涉及到数据填充的部分,数据的填充有很多种方案,用的比较多的有pkcs#5,pkcs#7, 下面的都是从网上转来的.结论就是在AES 的使用中,p ...
- MarkDown初学
什么是MarkDown? 第一次用这个MarkDown,感觉很好,界面友好,使用简洁而又使用,最主要的是此园支持这个语法,欣慰欣慰!先这么多,看看效果如何 推荐个不错的学习网站 Markdown 语法 ...