1.index.html  子组件直接修改父组件的数据

组件通讯：

　　vm.$emit();

　　vm.$on();

父组件和子组件：

子组件想要拿到父组件数据：

　　通过 props

　　之前,子组件可以更改父组件信息,可以是同步 sync

　　现在,不允许直接给父级的数据,做赋值操作

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="vue.js"></script>

	<script>

		window.onload = function() {

			new Vue({

				el:'#box',

				data:{

					a:'我是父组件'

				},

				components:{

					'child-com':{

						props:['msg'],

						template:'#child',

						methods:{

							change(){

								this.msg = '被更改了';

							}

						}

					}

				}

			});

		}

	</script>

</head>

<body>

	<template id="child">

		<div>

			<span>我是子组件</span>

			<input type="button" value="按钮" @click="change" />

			<strong>{{msg}}</strong>

		</div>

	</template>

	<div id="box">

		父级：-> {{a}}

		<br/>

		<child-com :msg="a"></child-com>

	</div>

</body>

</html>

点击按钮之前

点击按钮之后

原因

2.问题,就想更改：

a).父组件每次传一个对象给子组件,对象之间是引用的

index2.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="vue.js"></script>

	<script>

		window.onload = function() {

			new Vue({

				el:'#box',

				data:{

					giveData:{

						a:'我是父组件数据'

					}

				},

				components:{

					'child-com':{

						props:['msg'],

						template:'#child',

						methods:{

							change(){

								// this.msg = '被更改了';

								this.msg.a = '被更改了';

							}

						}

					}

				}

			});

		}

	</script>

</head>

<body>

	<template id="child">

		<div>

			<span>我是子组件</span>

			<input type="button" value="按钮" @click="change" />

			<strong>{{msg.a}}</strong>

		</div>

	</template>

	<div id="box">

		父级：-> {{giveData.a}}

		<br/>

		<child-com :msg="giveData"></child-com>

	</div>

</body>

</html>

点击按钮之前：

点击按钮之后：

3. b).只是不报错,mounted中转

index3.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="vue.js"></script>

	<script>

		window.onload = function() {

			new Vue({

				el:'#box',

				data:{

					a:'我是父组件数据'

				},

				components:{

					'child-com':{

						data(){

							return{

								b:''

							}

						},

						props:['msg'],

						template:'#child',

						mounted(){

							this.b = this.msg;

						},

						methods:{

							change(){

								// this.msg = '被更改了';

								// this.msg.a = '被更改了';

								this.b = '被更改了';

							}

						}

					}

				}

			});

		}

	</script>

</head>

<body>

	<template id="child">

		<div>

			<span>我是子组件</span>

			<input type="button" value="按钮" @click="change" />

			<strong>{{b}}</strong>

		</div>

	</template>

	<div id="box">

		父级：-> {{a}}

		<br/>

		<child-com :msg="a"></child-com>

	</div>

</body>

</html>

点击按钮之前：

点击按钮之后：

4,可以单一事件管理组件通信：vuex

var Event = new Vue();

Event.$emit(事件名称,数据);

Event.$on(事件名称,function(data){

// data

}.bind(this));

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="vue.js"></script>

	<script>

		// 先准备一个空的实例对象 (必须是全局的)

		var Event = new Vue();

		// A组件

		var A = {

			template:`

				<div>

					<span>我是A组件</span> -> {{a}}

					<input type="button" value="把A数据给C" @click="send" />

				</div>

			`,

			methods:{

				send(){

					// 通过 $emit 传递数据

					Event.$emit('a-msg',this.a);

				}

			},

			data(){

				return{

					a:'我是a数据'

				}

			}

		};

		// B组件

		var B = {

			template:`

				<div>

					<span>我是B组件</span> -> {{b}}

					<input type="button" value="把B数据给C"  @click="send" />

				</div>

			`,

			methods:{

				send(){

					// 通过 $emit 传递数据

					Event.$emit('b-msg',this.b);

				}

			},

			data(){

				return{

					b:'我是b数据'

				}

			}

		};

		// C组件

		var C = {

			template:`

				<div>

					<h3>我是C组件</h3>

					<span>接收过来的A的数据为：{{a}}</span>

					<br/>

					<span>接收过来的B的数据为：{{b}}</span>

				</div>

			`,

			data(){

				return{

					a:'',

					b:''

				}

			},

			mounted(){

				// // 定义变量,存储this,防止this指针发生偏转

				// var _this = this;

				// // 通过 $on 接收数据

				// Event.$on('a-msg',function(a){

				// 	_this.a = a;

				// });

				// 接收A组件的数据

				Event.$on('a-msg',function(a){

					this.a = a;

				}.bind(this)); // 函数上绑定this防止指针偏转

				// 接收B组件的数据

				Event.$on('b-msg',function(b){

					this.b = b;

				}.bind(this)); // 函数上绑定this防止指针偏转

			}

		};

		window.onload = function(){

			new Vue({

				el:'#box',

				components:{

					'com-a':A,

					'com-b':B,

					'com-c':C

				}

			});

		}

	</script>

</head>

<body>

	<div id="box">

		<com-a></com-a>

		<com-b></com-b>

		<com-c></com-c>

	</div>

</body>

</html>

点击按钮之前：

点击  '把A数据给C'  按钮

点击  ‘把B数据给C’  按钮

5.debounce 废弃

　　vue2.0-> loadash

　　　　_.debounce(fn,时间) // 延长执行

.

vue2.X 组件通信（$emit $on props）的更多相关文章

  1. vue2.0 组件通信

    组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...

  2. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  3. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  4. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  5. vue组件通信全面总结

    写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...

  6. vue2.0 组件之间的数据传递

    组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...

  7. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  8. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

  9. vuedraggable(vue2.0)组件详解

    github地址 安装 yarn add vuedraggable npm i -S vuedraggable 使用方式 通常 <draggable v-model="myArray& ...

随机推荐

  1. [暑假集训--数论]poj2262 Goldbach's Conjecture

    In 1742, Christian Goldbach, a German amateur mathematician, sent a letter to Leonhard Euler in whic ...

  2. Python之时间：time模块

    import time   对于时间,使用最频繁的模块 1.获取当前时间 (1)时间戳 time.time() 时间戳:从1970年1月1日0点开始到现在按秒计算的偏移量 (2)时间元组 time.l ...

  3. JavaScript 笔记(7) -- 在HTML中嵌入 js （外部引用）

    本节主要说明,在HTML中嵌入自定义 JavaScript.通过HTML的script标签加载JavaScript文件 为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部,例如下面的 ...

  4. nodeJS学习（6）--- Sublime Text3 配置Node.js 开发环境

    参考:http://www.bubuko.com/infodetail-798008.html http://www.cnblogs.com/bluesky4485/p/3928364.html 1. ...

  5. PHP一维数组和二维数字排序整理

    <?php /** 一维数组排序 sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组进行排序 ksort() - 根据键,以升 ...

  6. C/C++学习路线

    随着互联网及互联网+深入蓬勃的发展,经过40余年的时间洗礼,C/C++俨然已成为一门贵族语言,出色的性能使之成为高级语言中的性能王者.而在今天,它又扮演着什么样重要的角色呢?请往下看: 后端服务器,移 ...

  7. HDOJ 1085 Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  8. jsp和java获取文件或路径

    1.如何获得当前文件路径常用:(1).Test.class.getResource("")得到的是当前类FileTest.class文件的URI目录.不包括自己!(2).Test. ...

  9. django+vue+nginx生产环境部署配置

    部署环境: 1. linux redhat 7.1 2.python 3.6.3 3. vue 4. nginx 5. gunicorn 6. supervisord 安装: 一. 基础环境安装 1. ...

  10. 使用python将ppm格式转换成jpg【转】

    转自:http://blog.csdn.net/hitbeauty/article/details/48465017 最近有个很火的文章,叫 有没有一段代码,让你觉得人类的智慧也可以璀璨无比? 自己试 ...