vue2.X 组件通信（$emit $on props）
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）的更多相关文章
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- vue2.0 组件之间的数据传递
组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...
- React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- vuedraggable(vue2.0)组件详解
github地址 安装 yarn add vuedraggable npm i -S vuedraggable 使用方式 通常 <draggable v-model="myArray& ...
随机推荐
- Java GUI编程4---标签组件JLabel
Java GUI编程4---标签组件JLabel 2018年06月11日 22:06:58 蓝蓝223 阅读数 12103更多 个人分类: Java书籍摘抄 所属专栏: Java Swing图形界面 ...
- NOIP 2016 滚粗记
Day -∞ 听说要去晋城一中去考试. MMP,我在省会城市,为什么要去一个偏远的小城市去考NOIP 就是因为几年前它们那里出了一个金牌吗?都怪我们太菜了. Day 0 坐着长途大巴车去考试,其他人都 ...
- BestCoder 2nd Anniversary/HDU 5718 高精度 模拟
Oracle Accepts: 599 Submissions: 2576 Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/26 ...
- datalist、repearter、gridview显示行号的三种方法 或者是获取datalist行id
原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. if you are using SQL Server, try select identity(int,1 ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---40
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- reportlab包使用指南
reportlab.canvas有这六个主要参数 1.pagesize:设置纸张大小 #from reportlab.lib.pagesizes import letter, A4 导入常见的 ...
- c# automapper 使用
一.最简单的用法 有两个类User和UserDto 1 public class User 2 { 3 public int Id { get; set; } 4 public string Name ...
- java编码,乱码问题详解
一.常见的编码格式 1.ASCII 基础编码,英文和西欧字符. 用一个字节的低7位表示,一共128个. 0~13是控制字符如换行.回车.删除等,32~126是打印字符,键盘输入. 2.IOS-8859 ...
- 使用p6spy格式化日志输出
P6Spy 是针对数据库访问操作的动态监测框架(为开源项目,项目首 页:www.p6spy.com)它使得数据库数据可无缝截取和操纵,而不必对现有应用程序的代码作任何修改.P6Spy 分发包包括P6L ...
- (3)Django 配置
一.settings django安装的应用程序 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.c ...