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){ ...
随机推荐
- C# 中的DevExpress CheckedListBoxControl控件
1. 给checkedListBoxControl绑定数据源: checkedListBoxControl.DataSource = listRole; checke ...
- msdn帮助,离线下载
这是我在msdn下载,如果要看msdn帮助,不是在线看就是visual studio 帮助那下载. 在网速不好的时候msdn看,会让人不爽. 帮助那个下载速度很慢,于是我就去下载离线. 因为微软看不到 ...
- mplayer - Linux下的电影播放器
概要 mplayer [选项] [ 文件 | URL | 播放列表 | - ] mplayer [全局选项] 文件1 [特定选项] [文件2] [特定选项] mplayer [全局选项] {一组文件和 ...
- CDate()函数
CDate 函数 返回表达式,此表达式已被转换为 Date 子类型的 Variant. CDate(date) date 参数是任意有效的日期表达式. 说明 IsDate 函数用于判断 date 是否 ...
- rev 反向输出文件内容
1.命令功能 rev 按行反向输出文件内容 2.语法格式 rev file 3.使用范例 [root@localhost ~]# echo {a..k} >> test [root@lo ...
- vim小白练习记录
1.vim卡死 按ctrl+s键后 vim卡死,按任何键不管用,按ctrl+q恢复
- 点击链接跳转到QQ的情况; qq交谈
https://blog.csdn.net/qq_31856835/article/details/70225968 https://blog.csdn.net/qq_37815596/article ...
- 查看PL/SQL编译时的错误信息
编译无效对象是DBA与数据库开发人员常见的工作之一.对于编译过程中的错误该如何去捕获,下面给出两种捕获错误的方法. 一.当前数据库版本信息及无效对象 1.查看当前数据库版本 [sql] view pl ...
- 同一个项目的同一DLL多版本的兼容问题
在做REST接口时,想要引入swagger,引入了最新的Swashbuckle.Net45-5.2.1版本,可是这个版本关联两个DLL(System.Web.Http.System.Net.Http. ...
- vue-cli3.0以上项目中引入jquery的方法
这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...