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. 【转】unity Animator 怎么判断一个动画播放结束

    关于unity Animator 怎么判断一个动画播放结束这里有几种方法.希望对大家有帮助.还有其他办法的可以分享一下 第一种方法:在动画结束帧后面加个动画事件,调用下含这个变量的函数接口不是可以了? ...

  2. jQuery操作DOM基础 - 创建节点

    案例:创建两个<li>元素节点,并且作为<ul>元素节点的子节点,添加到DOM树中 <!DOCTYPE html> <html lang="en&q ...

  3. POJ1848 Tree 【树形dp】

    题目链接 POJ1848 题解 由题,一个环至少由三个点组成,一个点作为根时,可以单独成链,可以与其一个儿子成链,或者与其两个儿子成环,与其一个剩余链长度大于等于2的儿子成环. 那么我们设最小代价 \ ...

  4. E-card

    E-card 题目描述 两个人各有n张牌 第一个人有n-1张平民和1张皇帝 第二个人有n-1张平民和1张奴隶 每次选择一张牌 进行对决 如果都是平民则平局 皇帝赢平民 奴隶赢皇帝 平民赢奴隶(显然只会 ...

  5. Python之面向对象：继承

    概念:子类继承父类的属性和方法. 一个派生类(derived class)继承基类(bass class)字段和方法.继承也允许把一个派生类的对象作为一个基类对象对待. 一.单继承 :推崇.特点和使用 ...

  6. 解决jsp在ios小屏手机下面滑动不流畅的问题

    今天做好的静态文件发给后台改成jsp之后,发现原本流畅滑动的页面在iphone5下面变得一卡一卡的. 之后加上了 -webkit-overflow-scrolling: touch; 这个属性之后,成 ...

  7. java网络编程学习笔记（一）

    1.进程之间的通信 进程是指运行中的程序,进程的任务就是执行程序中的代码. 存在计算机网络上的两个进程只需要关注它们通信的具体内容,而不需关注消息在网络上传输的具体细节. 2.计算机网络的概念 Int ...

  8. AtCoder Regular Contest 090 C D E F

    C - Candies 题意 求左上角走到右下角最大的数字和. 思路 直接\(dp\) Code #include <bits/stdc++.h> #define maxn 110 usi ...

  9. /* Dr黄的技术博客开通啦 */

    以前懒得写技术日志, 现在终于发现重要性.. mark一下这个里程碑.

  10. LeetCode OJ--Merge Intervals @

    https://oj.leetcode.com/problems/merge-intervals/ 合并区间 //排序 sort(intervals.begin(),intervals.end(),C ...