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# 三种取整方法 向上取整 向下取整 四舍五入
Math.Round:四舍六入五取整 Math.Ceiling:向上取整,只要有小数都加1 Math.Floor:向下取整,总是舍去小数
- hdu 6053 TrickGCD(筛法+容斥)
TrickGCD Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...
- 原生js重写《锋利的JS》之 轮播效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2018.11.15 RF antenna impedance-matching
We have studied the impedance-matching of RF transmission line between the antenna and the RX / TX m ...
- React 与 可视化
一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics 全称 可缩放矢 ...
- vue.js 源代码学习笔记 ----- 工具方法 option
/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...
- 使用jQuery操作DOM(2)
1.获取设置属性值 attr({属性名1:属性值1,属性名2:属性值2}); //设置属性值 removeAttr(“属性名”); //删除属性 注意:如果元素没有此属性,会不起作用 2.获取同辈元素 ...
- C语言学习之指针
指针这块,看了好久才有点头绪,稍微有点理解了. 一.指针申明以及赋值 int *p; 这样就声明了一个int型的指针p,这个p就是指针变量,可能上述的书写方式会混淆我们队指针的理解(*号) 我们可以这 ...
- [置顶]
flume高并发优化——(15)中间件版本升级
在系统平稳运行一年的基础上,为提供更好的服务,现针对java,kafka,flume,zk,统一进行版本升级,请各位小伙伴跟着走起来,不要掉队啊! 名称 老版本号 新版本号 jdk 1.7.0_25 ...
- PHP语法笔记二
日期函数 date_default_timezone_set(“PRC”):时区设置为中国区 date(“日期格式”[,时间戳]):设置当前或某个时间戳的日期格式. 参数 format 表示时间格式化 ...