vue.js组件之j间的通讯三,通过单一事件来管理组件通讯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div> </body>
<script>
var A={
template:`
<div>
<span>我是组件A</span> -->{{a}}
<input type ="button" value ="把A数据传给C">
</div>
`,
data(){
return{
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是组件B</span> -->{{b}}
<input type ="button" value ="把B数据传给C">
</div>
`,
data(){
return{
b:'我是b数据'
}
} };
var C={
template:`
<div>
<span>我是组件C</span> -->{{c}}
<input type ="button" value ="把C数据传给A">
</div>
`,
data(){
return{
c:'我是c数据'
}
}
}; var app =new Vue({
el:"#app1",
data:{ a:'我是父组件的数据' },
/*//子组件,利用props进行数据传递:*/
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
</script>
</html>
案例基础页面:
展示结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div> </body>
<script>
/*全局的*/
var vm =new Vue(); var A={
template:`
<div>
<span>我是组件A</span> -->{{a}}
<input type ="button" value ="把A数据传给B" @click="send">
</div>
`,
data(){
return{
a:'我是a数据'
}
},
methods:{
send(){
vm.$emit('a-msg',this.a)
}
}
};
var B={
template:`
<div>
<span>我是组件B</span> -->{{b}}
<input type ="button" value ="把B数据传给C">
</div>
`,
mounted(){
vm.$on('a-msg',function(a){
alert(a);
this.b =a;
/*将this绑定给当前函数,引用当前函数*/
}.bind(this));
},
data(){
return{
b:'我是b数据'
}
} };
var C={
template:`
<div>
<span>我是组件C</span> -->{{c}}
<input type ="button" value ="把C数据传给A">
</div>
`,
data(){
return{
c:'我是c数据'
}
}
}; var app =new Vue({
el:"#app1",
data:{ a:'我是父组件的数据' },
/*//子组件,利用props进行数据传递:*/
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
</script>
</html>
之前结果:
传递之后的值:
vue.js组件之j间的通讯三,通过单一事件来管理组件通讯的更多相关文章
- vue.js组件之j间的通讯四,通过单一事件来管理组件通讯
总结; 首先需要创建是一个空实例: var vm = new Vue(); vm.$emit(事件,数据); vm.$on(事件,function(data){ }bind(this))
- 单一事件中心管理组件通信( vuex )
有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: 补充$emit ,$on的讲解 代码: <!DOCTYPE html> <h ...
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...
- vue2 单一事件中心管理组件通信
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- vue.js组件之j间的通讯二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
- vuejs组件交互 - 02 - 事件中心管理组件间的通信
事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
随机推荐
- [mpm_winnt:error] [pid 28120:tid 15980] (OS 10038)在一个非套接字上尝试了一个操作。 : AH00332: winnt_accept: getsockname error on listening socket, is IPv6 available?
解决办法一: 可能是安装了某些程序修改了Winsock,使用netsh winsock reset 命令修复Winsock重启计算机即可! 解决办法二: 在httpd.conf文件中添加 Win32D ...
- 分步编译一个C语言文件
一. 以下是C程序一般的编译过程: 从图中看到: 将编写的一个c程序(源代码 )转换成可以在硬件上运行的程序(可执行代码 ),需要进行编译阶段 和链接这两个阶段. 其中, 1. 编译阶段先通过“编 ...
- NLP整体流程的代码
import nltk import numpy as np import re from nltk.corpus import stopwords # 1 分词1 text = "Sent ...
- Swing绘图API
----------------siwuxie095 工程名:TestSwingPaintAPI 包名:com.siwuxie095.swing ...
- JDBC03 利用JDBC实现事务提交与回滚【调用Connection中的方法实现事务管理】
目录 1 Connection中的重用方法 2 JDBC事务管理经典案例 1 Connection类中常用的方法回顾 1.1 Statement createStatement() throws SQ ...
- Python 黑客 --- 002 入门级 ZIP压缩文件口令暴力破解机
Python 黑客 入门级实战:ZIP压缩文件口令暴力破解机 使用的系统:Ubuntu 14.04 LTS Python语言版本:Python 2.7.10 V 编写zip 压缩文件口令破解器需要使用 ...
- essential C++中关于面向过程和面向对象的说明
昨天在阅读essential C++中看到了一个关于面向过程和面向对象的区别的例子,感觉挺好的.记录下来.... 这个例子是关于照相机的.照相机有三个性质,一个是控制位置:通常使用3个浮点数据来表示其 ...
- JDK并发包2-线程池
- 数据结构_calculator
问题描述 小 V 发明了一个神奇的整数计算器:给定一个合法的表达式,这个计算器能求出这个表达式的最终答案.表达式可能包含:+:运算符,整数加法.如 1+1=2-:运算符,整数减法.如 1-1=0*:运 ...
- 原来腾讯安全中心TP和虚拟机vmware10是有冲突的
用VMware 10启动linux,总是出现VMware Workstation 不可恢复错误: (vmx)... 然后网上查了好多类似问题始终不能解决.后来发现每次出现这个问题腾讯的TP是启动的 ...