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. C#控制台程序读取项目中文件路径

    //使用appdomain获取当前应用程序集的执行目录 string dir = AppDomain.CurrentDomain.BaseDirectory; //使用path获取当前应用程序集的执行 ...

  2. 【bzoj4555】[Tjoi2016&Heoi2016]求和 NTT

    题目描述 在2016年,佳媛姐姐刚刚学习了第二类斯特林数,非常开心. 现在他想计算这样一个函数的值: S(i, j)表示第二类斯特林数,递推公式为: S(i, j) = j ∗ S(i − 1, j) ...

  3. SPOJ 422 Transposing is Even More Fun ——Burnside引理

    这题目就比较有趣了. 大概题目中介绍了一下计算机的储存方法,给一个$2^a*2^b$的矩阵. 求转置.但是只能交换两个数,求所需要的步数. 首先可以把变化前后的位置写出来,构成了许多的循环.左转将狼踩 ...

  4. 简单的log

    简单的方法想日志中追加内容 public static void updateSql(string Name,string str) { FileStream fs = new FileStream( ...

  5. 【CCF】 Markdown 模拟

    #include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...

  6. web储存用户信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 【Codeforces Round #519】

    A:https://www.cnblogs.com/myx12345/p/9872082.html B:https://www.cnblogs.com/myx12345/p/9872124.html ...

  8. 【Reship】use of tangible T4 template engine

    1.first of all 之前在 “使用T4模板生成代码 – 初探” 文章简单的使用了T4模板的生成功能,但对于一个模板生成多个实例文件,如何实现这个方式呢?无意发现一个解决方案 “Multipl ...

  9. LeetCode OJ-- Reorder List **

    https://oj.leetcode.com/problems/reorder-list/ 将一个链表重新排序,比如 1 2 3 4 5,变成 1 5 2 4 3 1.找到中间节点 mid 2.将链 ...

  10. 离线安装ATOM插件

    refer to https://blog.csdn.net/ytangdigl/article/details/75168695 cd ~/.atom/packages git clone http ...