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.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
组件之间可以通过属性传递数据，并通过事件系统进行通信。 #### 五、示例代码解析 - **基本示例**： ```javascript var vm = new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' } }); ``` - **解释**...
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，...
组件通信是Vue.js中的重要概念，主要包含以下几种方式： 1. **父子组件通信**： - **props**：父组件通过`props`向子组件传递数据。 ```javascript // 父组件 <child-component :some-prop="parentData"></...
这个压缩包中的自测卷和课后习题涵盖了以上知识点，可能包括了Vue实例的创建、组件的编写、数据绑定的使用、条件渲染、列表渲染、事件处理、组件通信、路由配置以及Vuex的应用等方面的问题。通过解答这些问题，学习...
Vue.js推荐使用Vuex作为状态管理库，它提供了集中式的状态存储和操作，使得组件间的通信更加有序。 4. **Vue Router路由管理**：Vue Router是Vue.js官方的路由库，用于处理页面间的导航和状态。在“黑马头条”这样...
Vue.js是目前非常流行的JavaScript框架之一，它简化了前端开发流程，特别是对于构建单页面应用(SPA)。Vue Devtools作为官方支持的开发工具，极大地提升了Vue项目开发的效率和质量。以下是Vue.js Devtools 6.5.0的...
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，因其易学易用、高效灵活的特点，在Web开发领域广受欢迎。Vue.js v2.6.12是该框架的一个版本，它继承了Vue的核心特性，并在前一版本的基础上进行了...
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，因其易学易用、高效灵活的特点，在Web开发领域广受欢迎。Vue.js的核心特性包括数据绑定、组件系统、指令系统、虚拟DOM以及生命周期管理等，使得...
Vue.js的面试题涉及到多个方面，包括路由管理、状态管理、组件通信、指令使用等，这些都是Vue.js应用开发的核心知识点。 首先，Vue.js中关于路由管理的面试题，可能会涉及路由守卫的使用。比如beforeEach和after...
Vue.js是一种流行的、开源的JavaScript框架，用于构建用户界面，特别是在单页面应用程序（SPA）中。Vue.js的设计理念是简洁、灵活，同时提供强大的功能，让开发者能够更高效地构建可维护的前端应用。这份“Vue.js...
3. **实现组件通信**：通过props和事件来实现父子组件之间的交互。 4. **处理异步数据**：学习如何在Vue中使用axios等库获取和处理API数据。 5. **使用过渡效果**：了解如何在Vue中实现组件的动画和过渡效果。 6. **...
Vue.js 是一款轻量级的前端JavaScript框架，其核心设计理念是数据驱动和组件化。"vue.min.js" 文件是Vue.js的压缩版本，通常用于生产环境以提高网页加载速度。这个文件包含了Vue.js库的所有功能，但进行了压缩和优化...
9. **状态管理（Vue Router）**：Vue Router是Vue.js的官方路由库，它实现了前端路由功能，允许我们根据URL路径来切换和渲染不同的组件，实现页面的无刷新跳转。 10. **单文件组件（Single File Components, SFC）*...
5. 组件系统：讲解Vue组件的创建和使用，包括组件通信、组件的复用和组合，以及过渡和动画的实现。 6. Vuex和Vue Router：介绍如何利用Vuex解决大型项目的状态管理问题，以及如何使用Vue Router实现单页面应用内的...
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。在Vue.js中，组件是构建大型应用程序的基本单元。组件之间的通信可以通过多种方式实现，其中props是父子组件间数据传递的主要手段。本文将详细探讨Vue.js中...
组件可以通过props接收父组件的数据，使用slots定义内容区域，还能通过emit触发自定义事件与父组件通信。Vue 2.0中引入了单文件组件（Single File Components，简称SFC），将模板、脚本和样式放在一个文件中。 八、...
在实现购物车功能时，Vue.js提供了事件系统，允许组件之间进行通信。例如，商品列表组件可以通过触发事件通知购物车组件增加或减少商品数量。这通过`v-on`指令或`this.$emit`方法实现，使得不同组件间的协同工作变得...
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。在本文中，我们将深入探讨Vue.js的核心概念、关键特性以及如何通过学习Vue.js来提升前端开发技能。 首先，Vue.js的核心...