四、兄弟组件间通信(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组件兄弟间通信的更多相关文章

  1. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  2. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  3. VUE组件如何通信

    Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...

  4. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  5. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  6. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  7. vue组件间通信

    组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...

  8. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  9. vue组件间通信子与父

    二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...

随机推荐

  1. AVCaptureSession拍照,摄像,载图总结

    AVCaptureSession [IOS开发]拍照,摄像,载图总结 1 建立Session  2 添加 input  3 添加output  4 开始捕捉 5 为用户显示当前录制状态 6 捕捉 7 ...

  2. Apache 的 bin 目录文件详解

    [root@Apache bin]# tree ├── ab    #Apache 性能测试工具 ├── apachectl    #Apache 启动命令,它是一个脚本 ├── apr-1-conf ...

  3. 分岔 Bifurcations

    1. saddle-node bifurcation 2. transcritical bifurcation 3.pitchfork bifurcation 4. Hopf bifurcation ...

  4. centos7安装mxnet

    pip install mxnet-cu90 -i http://pypi.douban.com/simple --trusted-host pypi.douban.com 安装sklearn时总报错 ...

  5. nginx_mirror_module流量复制在项目中的应用

    参考文档:https://my.oschina.net/andChow/blog/2873870 https://blog.csdn.net/lancerh/article/details/88645 ...

  6. R语言-变量命名规则

    1.大原则:只有字母(区分大小写).数字.“_”(下划线).“.”(英文句号)可以出现. 2.数字.下划线不能开头. 3.英文句号开头不能紧接数字. 就这么简单!

  7. 表格 td 设置宽度无效问题

    现在有个需求,就是表格的列不固定,都是动态加载的,想给每一列设置宽度,但是设置 width:100xp,没有效果,不过设置min-width:100px 就有效果了,table的宽度为 td的宽度和 ...

  8. php中如何上传整个文件夹里的所有文件?

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  9. POJ 1742 Coins ( 经典多重部分和问题 && DP || 多重背包 )

    题意 : 有 n 种面额的硬币,给出各种面额硬币的数量和和面额数,求最多能搭配出几种不超过 m 的金额? 分析 : 这题可用多重背包来解,但这里不讨论这种做法. 如果之前有接触过背包DP的可以自然想到 ...

  10. Liunx的软链接和硬链接

    ln 命令  命令名称: ln. 英文原意: make links between file. 所在路径: /bin/ln. 执行权限:所有用户. 功能描述:在文件之间建立链接. ln 命令 ...