vue组件兄弟间通信
四、兄弟组件间通信（event）
借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发
var bus = new Vue();
bus.$emit()
bus.$on()
熊大想要发消息给熊二，
接收方（熊二）：事件绑定
bus.$on('customEvent',function(msg){
//msg就是通过事件 传递来的数据
})
发送方（熊大）：触发事件
bus.$emit('customEvent',123);
练习：
在熊二中 加上一个button，
点击按钮时告诉熊大:'快跑！'
接收方：事件绑定
发送方：触发事件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<xiongda></xiongda>
<hr>
<xionger></xionger>
</div>
<script>
/*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
var bus = new Vue();
//熊大发送消息给熊二
//xiongda组件
Vue.component("xiongda",{
methods:{
sendToXiongEr:function(){
//给熊二发送消息
//触发msgToXiongEr事件
bus.$emit("msgToXiongEr","哈哈，光头强来了");
}
},
template:`
<div>
<h1>我是熊大</h1>
<button @click="sendToXiongEr">Click Me</button>
</div>
`
})
//熊二组件
Vue.component("xionger",{
template:`
<div>
<h1>我是熊二</h1>
</div>
`,
mounted:function(){
// 给该组件绑定一个自定义事件和对应的处理函数
//调用bus中的on方法
//事件的触发一般是接收数据然后处理
var that = this;
bus.$on("msgToXiongEr",function(msg){
alert("自定义的事件触发，接收到的数据"+msg);
})
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
改版：熊大在input输入数据传递给熊二
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<xiongda></xiongda>
<hr>
<xionger></xionger>
</div>
<script>
/*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
var bus = new Vue();
//熊大发送消息给熊二
//xiongda组件
Vue.component("xiongda",{
data:function(){
return {
xiongDaInput:""
}
},
methods:{
sendToXiongEr:function(){
//给熊二发送消息
//触发msgToXiongEr事件
bus.$emit("msgToXiongEr",this.xiongDaInput);
this.xiongDaInput = "";
}
},
template:`
<div>
<h1>我是熊大</h1>
<input type="text" v-model="xiongDaInput"/>
<button @click="sendToXiongEr">Click Me</button>
</div>
`
})
//熊二组件
Vue.component("xionger",{
data:function(){
return{
recvMsgIs:[]
}
},
template:`
<div>
<h1>我是熊二</h1>
<p v-for="tmp in recvMsgIs">{{tmp}}</p>
</div>
`,
mounted:function(){
// 给该组件绑定一个自定义事件和对应的处理函数
//调用bus中的on方法
//事件的触发一般是接收数据然后处理
var that = this;
bus.$on("msgToXiongEr",function(msg){
//alert("自定义的事件触发，接收到的数据"+msg);
that.recvMsgIs.push(msg);
})
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue组件兄弟间通信的更多相关文章
- vue组件间通信六种方式（完整版）
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
随机推荐
- AsyncDisplayKit
Facebook发布了其iOS UI框架AsyncDisplayKit(ASDK)1.0正式版,这个框架被用于Facebook自家的应用Paper中,能够提高UI的流畅性并缩短响应时间. 下载和使用 ...
- Java设计模式之——代理设计模式
1.什么是代理设计模式 所谓代理模式是指客户端并不直接调用实际的对象,而是通过调用代理,来间接的调用实际的对象. 这里举一个栗子:就拿我们平时租房子来举例子,好比租客和房主之间的关系,我们租房子往往不 ...
- 创建kudu数据集测试总结
参考文档: https://cloud.tencent.com/developer/article/1474797 https://www.tgshenghe.com/a77nr1/nzt9t1.ht ...
- 表达式，数据类型和变量(Expressions，Data Types & Variables)
(一)表达式: 1)4+4就是表达式,它是程序中最基本的编程指令:表达式包含一个值(4)和操作符号(+),然后就会计算出一个单独的值; 2)一个单独的值没有包含操作符号也可以叫表达式,尽管它只计算它本 ...
- Python---进阶---常用模块os、jso
一.写一个6位随机验证码程序(使用 random模块),要求验证码中至少包含一个数字.一个小写字母.一个大写字母 import randomimport string #help(string) co ...
- LeetCode--148--排序链表(python)
在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3输出: 1->2->3->4示例 2: 输入: ...
- LeetCode--102--二叉树的层次遍历（python）
给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 ...
- 对SQL 优化，提升性能！
对SQL 进行优化能够有效提高SQL 语句的执行效率,降低系统资源开销,是开发者提高后端系统处理能力的首选方案. 新产品上线后,随着运营推广活动的开始,业务进入快速增长期,数据库作为后端系统唯一或者主 ...
- SQL Server性能调优--优化建议（一）
序言 当数据量小的时候,SQL优化或许无关紧要,但是当数据量达到一定量级之后,性能优化将变得至关重要,甚至决定系统成败. 定位慢查询 查询编译以来cpu耗时总量最多的前50条 --查询编译以来 cpu ...
- new Date(str)返回 Invalid date问题
var date=new Date($("input[name='mettingTime']").val().replace(/-/g, "/")); var ...