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 ...
随机推荐
- 部署C# ReportViewer遇到的坑
前些天临时给客户做个工具,统计具体时间点各种车型数据的数量及比重,为了显示方便就用C#来做,因为它有现成的reportviwer控件提供了显示,打印,导出功能.原本我以为这个控件是.netframew ...
- CSS: rem
.rem是(font size of the root element) 一般都是body的font-size为基准,即rem是相对于根元素. 字体单位 根据html根元素大小而定,同样可以作为宽度, ...
- New Concept English Two 33 94
$课文92 自找麻烦 1016. It must have been about two in the morning when I returned home. 我回到家时,肯定已是凌晨两点左右了 ...
- Xcode 9 俩个你必须知道的新功能
Xcode 9 beta 版已经可以下载了,不知道大家伙对这个新版本开发工具看法如何,最近我费了一番周折终于体验了一把,升级系统,下载Xcode,验证安装扒拉扒拉什么的,几乎搞了我一天,我做开发使用的 ...
- js之广告弹出自动关闭
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 【剑指offer】不使用除法,构建乘积数组,C++实现
# 题目 # 思路 设C[i] = A[0] * A[1] * - * A[i-1],D[i] = A[i+1] * - * A[n-1],则C[i]按照从上到下的顺序计算,即C[i] = C[i- ...
- bytes 与 str的区别以及装换
bytes 和 str 的区别: bytes 存储字节( 通常值在 range(0, 256)) str 存储unicode字符( 通常值在0~65535) bytes 与 str 的转换 编码(en ...
- Windows中cmd操作mysql
打开CMD 将工作目录切换到MySQL的bin下 mysql -u root -p 输入密码即可登陆MySQL 问号可以查看帮助 首先需要选择操作的数据库use database_name 然后可以进 ...
- BZOJ4831: [Lydsy1704月赛]序列操作(非常nice的DP& 贪心)
4831: [Lydsy1704月赛]序列操作 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 250 Solved: 93[Submit][Statu ...
- HDU4612Warm up 边双连通 Tarjan缩点
N planets are connected by M bidirectional channels that allow instant transportation. It's always p ...