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){ ...
随机推荐
- 利用WebSocket和EventSource实现服务端推送
可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历(轮询)看下面的代码: setInterval(function() { $.get('/get/data- ...
- 关于Windows 10上MarkdownPad2无法预览的解决办法
升级win10后,发现一直可以用的MarkdownPad2预览功能不可以用了.于是在网上搜索了一下,刚开始没有解决.不过现在可以了.现在把解决方案记录下来.Windows10上使用MarkdownPa ...
- ASSERT（）断言
头文件<assert.h> 作用:用于判断是否有非法的数据,有则程序报告错误,终止运行.(注意是非法情况,而不是错误情况) ASSERT()和assert()的区别: ASSERT ...
- 如何对GitHubPages上的静态资源进行CDN加速
前记 从我开始学习前端我就一直在做着我的个人简历网站,使用GitHubpPages的预览功能进行预览,但是由于最近我的个人简历,不停的丰富,图片增多,而且将css和js文件用webpack打包后变成一 ...
- SQL插入字段
//SQL插入字段 String dropTable="drop table if exists test;"; String columnGid ="alter tab ...
- 靠！老师居然叫我们去写博弈论！！！结果写了一个晚上的博弈论，简直要死QAQ。。。发发博客休息一下。。。TAT。。。
萌萌的糖果博弈 题目描述: 用糖果来引诱小朋友学习是最常用的手法,绵羊爸爸就是用糖果来引诱萌萌学习博弈的.他把糖果分成了两堆,一堆有A粒,另一堆有B粒.他让萌萌和他一起按照下面的规则取糖果:每次可以任 ...
- php 处理错误和异常技巧
set_time_limit(0); ini_set('memory_limit','1024M'); function exception_handler($exception) { echo &q ...
- 在XenCenter6.2中构建CentOS7虚拟机的启动错误
在XenCenter6.2中创建CentOS7虚拟机时,发现系统并没有提供CentOS7 64bit的模板,只有CentOS6 64bit模板.如果采用CentOS6作为其模板来创建CentOS7虚拟 ...
- POJ 1383 Labyrinth （bfs 树的直径）
Labyrinth 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/E Description The northern part ...
- HTML5和CSS3兼容清单
1.CSS3 2.CSS3选择器 3.HTML5 4.HTML5 From