event bus非父子组件怎样相互通信-js教程-PHP中文网

首页

web前端

js教程

event bus非父子组件怎样相互通信

php中世界最好的语言

Apr 16, 2018 pm 02:25 PM

event 怎样

这次给大家带来event bus非父子组件怎样相互通信，event bus非父子组件相互通信的注意事项有哪些，下面就是实战案例，一起来看一下。

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

登录后复制

在更多复杂的情况下，你应该考虑使用专门的状态管理模式.就是用到了vuex

eventBus是作为兄弟关系的组件之间的通讯中介。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<p id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</p>
<script>
var eventHub = new Vue( {
data(){
return{
todos:['A','B','C']
}
},
created:function () {
this.$on('add', this.addTodo)
this.$on('delete', this.deleteTodo)
},
beforeDestroy:function () {
this.$off('add', this.addTodo)
this.$off('delete', this.deleteTodo)
},
methods: {
addTodo: function (newTodo) {
this.todos.push(newTodo)
},
deleteTodo: function (i) {
this.todos.splice(i,1)
}
}
})
var newTodo = {
template:`<p><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></p>`,
data(){
return{
newtodo:''
}
},
methods:{
add:function(){
eventHub.$emit('add', this.newtodo)
this.newtodo = ''
}
}
}
var todoList = {
template:`<ul><li v-for="(index,item) in items">{{item}} \
     <button @click="rm(index)">X</button></li> \
     </ul>`,
     data(){
     return{
     items:eventHub.todos
     }
     },
     methods:{
     rm:function(i){
     eventHub.$emit('delete',i)
     }
     }
}
var app= new Vue({
el:'#todo-app',
components:{
newTodo:newTodo,
todoList:todoList
}
})
</script>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7401

Java教程

1630

CakePHP 教程

1358

Laravel 教程

1268

PHP教程

1217

显示更多

Related knowledge

PHP8.0中的事件处理库：Event May 14, 2023 pm 05:40 PM

PHP8.0中的事件处理库：Event随着互联网的不断发展，PHP作为一门流行的后台编程语言，被广泛应用于各种Web应用程序的开发中。在这个过程中，事件驱动机制成为了非常重要的一环。PHP8.0中的事件处理库Event将为我们提供一个更加高效和灵活的事件处理方式。什么是事件处理在Web应用程序的开发中，事件处理是一个非常重要的概念。事件可以是任何一种用户行

Steam 夏季特卖 - Valve 预告 AAA 游戏可享受 95% 的折扣，确认病毒游戏 Palworld 和内容警告的折扣 Jun 26, 2024 pm 03:40 PM

Steam 的夏季特卖此前曾举办过一些最优惠的游戏折扣，而今年 Valve 似乎又迎来了另一场全垒打。刚刚发布了一段预告片（请参见下文），其中展示了一些 Steam 夏季特卖折扣游戏。

Python之Pygame的Event事件模块怎么使用 May 18, 2023 am 11:58 AM

Pygame的Event事件模块事件（Event）是Pygame的重要模块之一，它是构建整个游戏程序的核心，比如常用的鼠标点击、键盘敲击、游戏窗口移动、调整窗口大小、触发特定的情节、退出游戏等，这些都可以看做是“事件”。事件类型Pygame定义了一个专门用来处理事件的结构，即事件队列，该结构遵循遵循队列“先到先处理”的基本原则，通过事件队列，我们可以有序的、逐一的处理用户的操作（触发事件）。下述表格列出了Pygame中常用的游戏事件：名称说明QUIT用户按下窗口的关闭按钮ATIVEEVENTPy

在JavaScript中，当浏览器窗口调整大小时，这是哪个事件？ Sep 05, 2023 am 11:25 AM

使用window.outerWidth和window.outerHeight事件在JavaScript中获取窗口大小，当浏览器调整大小时。示例您可以尝试运行以下代码来使用事件检查浏览器窗口大小−<!DOCTYPEhtml><html> <head> <script>&am

Steam 夏季促销预告片预告 AAA 游戏优惠 95%，确认 Palworld、Stellaris 降价，内容警告 Jun 26, 2024 am 06:30 AM

评估Win10：韩博士的看法 Jan 05, 2024 pm 12:11 PM

win10是一个非常好用的系统，但是有时候这个系统也是会出问题的，于是很多对电脑不精通的用户就会选择重装系统来彻底解决这个问题，他们通常会选择韩博士，于是就想要了解一下这个软件怎么样呢，那就一起来文中看看吧。韩博士win10怎么样答：这是一个还不错的win10系统。这款软件可以做到没有任何基础的用户，在不需要光驱和U盘的情况下，通过简单的操作和流程完成对系统的重装。软件同时提供了系统的备份镜像系统和还原镜像系统这两个非常重要的系统重装工具。同时软件中还有非常多的其他功能，比如一键重装系统、u盘重