vue.js不同组件（或者同一组件兄弟子组件）间通信，简单情况下，VUE推荐使用空的VUE实例充当事件总线。今天按官网试着做了一个例子。
例子说明：主持人组件发布命令，1个门卫组件、2个参会者组件接收命令。
效果如下图所示：
代码比较简单，不多解释了。
<!DOCTYPE html>
<!--
作者：wallimn
博客：http://wallimn.iteye.com
时间：2017-11-22
-->
<html>
<head>
<meta charset="utf-8">
<title>vue事件总线示例</title>
<script type="text/javascript" src="../lib/vue.js"></script>
</head>
<body>
<div id="meetingHost">
主持人命令：<select v-model="command">
<option value="开会">开会</option>
<option value="休息">休息</option>
<option value="散会">散会</option>
</select>
<button type="button" @click="sendCommand">发布命令</button>
</div>
<hr>
<div id="guard">
门卫收到命令：{{commandOfHost}}
</div>
<div id="guest">
<meeting-guest name="张三"></meeting-guest>
<meeting-guest name="李四"></meeting-guest>
</div>
<script type="text/javascript">
var Bus = new Vue();//事件总线
//主持人
var vueHost = new Vue({
el:'#meetingHost',
data:function(){
return {
command:''
};
},
methods:{
sendCommand:function(){
Bus.$emit('hostCommand',this.command);
}
}
});
//自定义组件，参会者
Vue.component('meeting-guest', {
template: '<div>{{name}}收到命令：{{ commandOfHost }}</div>',
props:['name'],
data: function(){
return {
commandOfHost: ''
};
},
created:function(){
var self = this;
Bus.$on('hostCommand',function(command){
self.commandOfHost = command;
});
}
});
var vueGuest = new Vue({el:'#guest'});
//门卫
var vueGuard = new Vue({
el:"#guard",
data:function(){
return {
commandOfHost:''
};
},
created:function(){
var self = this;
Bus.$on('hostCommand',function(command){
self.commandOfHost = command;
});
}
});
</script>
</body>
</html>
- 大小: 4.5 KB
分享到：
相关推荐
主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。
主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。
请描述Vue.js中实现组件通信的方法。 5. Vue.js中的生命周期钩子函数有哪些？它们分别在何时被调用？ 6. Vue.js中的computed属性和watch属性有何区别？分别适用于哪些场景？ 7. Vue.js中如何进行路由导航？请简要...
主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。
主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。
在Vue.js中，可以使用Vue.component()方法来定义组件。该方法接受两个参数：组件名称和组件选项对象。 组件选项对象可以包含以下属性： - template：组件的模板字符串。 - data：组件的数据对象。 - methods：组件...
主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。
9. 如何实现Vue.js组件之间的通信？说说你的思路。 10. 你了解Vue.js的服务端渲染(SSR)吗？可以简单叙述一下其实现原理吗？ 以上是一些常见的Vue.js面试题，但面试中可能会有更细致的考察，要充分准备。
当面试Vue相关职位时，以下是一些可能的面试问题和答案，供参考： 1、什么是Vue.js？它有哪些主要特点？ 答：Vue.js是一种JavaScript框架，用于构建用户界面和单页应用程序。...5、Vue中如何实现组件通信？
最近一直在做 Vue项目代码层面上的优化，写文章是很easy的事情，今天小编给大家分享Vue.js 父子组件通信的十种方式，感兴趣的的朋友跟随小编一起看看吧
使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产...
本书致力于普及国内Vue.js 技术体系，主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析等。免责声明 ：本资料仅供学习研究之用,不得...
基于Vue.js 2.x版本，目前最全的Vue.js教学视频，让你少走弯路，直达技术前沿！多面讲解Vue.js全家桶（vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等） 课程内容包含：1. 数据绑定、模板、指令...
主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
主要和大家一起深入探讨Vue.js组件和组件通信的相关资料，感兴趣的小伙伴们可以参考一下
这份资源收集了一些常见的Vue.js面试题，涵盖Vue.js的各个方面，从基础到进阶，包括Vue.js的核心概念和原理,Vue.js的生命周期钩子函数、组件通信、路由、Vuex 状态管理、服务端渲染等等。 适用人群： 本资源适用于...
今天小编就为大家分享一篇vue.js父子组件通信动态绑定的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示： 自定义事件 当子组件需要向父组件传递数据时，就要用到自定义事件。子组件用**$...