Web Front-end
JS Tutorial
How event bus non-parent-child components communicate with each other
How event bus non-parent-child components communicate with each other
This time I will show you how event bus non-parent and child components communicate with each other. What are the precautions for event bus non-parent and child components to communicate with each other? Here is a practical case, let’s take a look.
Sometimes components that are not in a parent-child relationship also need to communicate. In a simple scenario, use an empty Vue instance as the central Event bus:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})In more complex cases, you should consider using a dedicated state management mode. That is using vuex
eventBus is a communication intermediary between components that act as brothers.
Code example:
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How does JS detect scripts in the browser
Popup popup box binding add data event ( Detailed explanation of steps)
The above is the detailed content of How event bus non-parent-child components communicate with each other. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Event processing library in PHP8.0: Event
May 14, 2023 pm 05:40 PM
Event processing library in PHP8.0: Event With the continuous development of the Internet, PHP, as a popular back-end programming language, is widely used in the development of various Web applications. In this process, the event-driven mechanism has become a very important part. The event processing library Event in PHP8.0 will provide us with a more efficient and flexible event processing method. What is event handling? Event handling is a very important concept in the development of web applications. Events can be any kind of user row
Steam Summer Sale - Valve teases 95% off AAA games, confirms discounts for viral games Palworld and Content Warning
Jun 26, 2024 pm 03:40 PM
Steam's Summer Sale has previously played host to some of the best game discounts, and this year seems to be stacking up for another home run by Valve. A trailer (watch below) teasing some of the Steam Summer Sale discounted games was just released i
How to use Pygame's Event event module in Python
May 18, 2023 am 11:58 AM
Pygame's Event module Event (Event) is one of the important modules of Pygame. It is the core of building the entire game program, such as commonly used mouse clicks, keyboard taps, game window movement, window resizing, triggering specific plots, and exiting. Games, etc., these can be regarded as "events". Event type Pygame defines a structure specifically used to process events, namely the event queue. This structure follows the basic principle of "first come, first processed" in the queue. Through the event queue, we can process user operations in an orderly and one-by-one manner ( trigger event). The following table lists the commonly used game events in Pygame: Name Description QUIT The user presses the close button of the window ATIVEEVENTPy
In JavaScript, when the browser window is resized, which event is this?
Sep 05, 2023 am 11:25 AM
Use the window.outerWidth and window.outerHeight events to get the window size in JavaScript when the browser resizes. Example You can try running the following code to check the browser window size using events −<!DOCTYPEhtml><html> <head> <script>&am
Steam Summer Sale trailer teases 95% off AAA game deals, confirms price cuts for Palworld, Stellaris, Content Warning
Jun 26, 2024 am 06:30 AM
Steam's Summer Sale has previously played host to some of the best game discounts, and this year seems to be stacking up for another home run by Valve. A trailer (watch below) teasing some of the Steam Summer Sale discounted games was just released i
Evaluating Windows 10: Dr. Han's perspective
Jan 05, 2024 pm 12:11 PM
win10 is a very easy-to-use system, but sometimes there will be problems with the system, so many users who are not proficient in computers will choose to reinstall the system to completely solve the problem. They usually choose Dr. Han, so they thought If you want to know what this software is like, let’s take a look in the article. Dr. Han’s answer about win10: This is a pretty good win10 system. This software allows users without any basic knowledge to reinstall the system through simple operations and processes without the need for a CD-ROM drive or USB flash drive. The software also provides two very important system reinstallation tools: system backup mirror system and restore mirror system. At the same time, there are many other functions in the software, such as one-click system reinstallation, USB disk reinstallation, etc.
Tesla sends out Robotaxi invitations for October 10 autonomous driving demo event in LA
Sep 27, 2024 am 06:20 AM
It was initially expected that Tesla would unveil its previously leaked Robotaxi back in August of this year, but CEO Elon Musk postponed the event, citing aesthetic changes to the front of the robotaxi and additional time needed for a few last-minut
Tesla Robotaxi reveal to go ahead on October 10 as invitations go out to select shareholders
Sep 26, 2024 pm 06:06 PM
It was initially expected that Tesla would unveil its previously leaked Robotaxi back in August of this year, but CEO Elon Musk postponed the event, citing aesthetic changes to the front of the robotaxi and additional time needed for a few last-minut
