


This article brings you an introduction to the use of value transfer and event bus (eventbus) in Vue non-parent-child components. It has certain reference value. Friends in need can refer to it. , hope it helps you.
Let’s first talk about what an event bus is. It is actually a subscription publisher model;
For example, there is a bus object. There are two methods on this object, one is on (listening, That is, subscription), one is emit (trigger, that is, publishing), we listen to an event through the on method, then use emit to trigger the event, and at the same time call the callback function in on, thus completing an event trigger;
This is a design pattern that has nothing to do with language;
If you don’t know what the subscription publisher pattern is, please read this article JavaScript design pattern--observer pattern (Publisher-Subscriber Model)
In actual development, the most troublesome thing is often the value transfer problem between various components; if you use the event bus, this matter will become very simple;
The shortcomings of vue’s own event bus
We all know that after vue is instantiated, it has the ability to act as an event bus object. Hang on it There are two methods, $emit and $on;
The vue document makes it very clear that $emit will trigger events on the current instance, and additional parameters will be passed to the listener callback;
Since in actual work, we develop in the form of components, and each component is an instance;
There are great limitations in using the bus capabilities of vue. At most, it can only be developed from sub-components. Triggered to the parent component, but cannot pass values between non-parent and child components;
So at this time, we need to have a global event bus object, allowing us to mount listening events and triggering events;
For example, a child component passes a value to a parent component; it is very simple for a parent component to pass a value to a child component. We will not talk about here
// 子组件中 <template> <div> <span>{{child}}</span> <input> </div> </template> <script> export default { data () { return { child: '我是子组件的数据' } }, methods: { send () { // 如果传多个值就用逗号隔开 a, b, c this.$emit('fromChild', this.child) } } } </script>
// 父组件 <template> <div> <span>{{name}}</span> // 在父组件中监听 fromChild事件 <child></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { onFromChild: function (data) { // data就是子组件传过来的值 // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3 this.name = data } } } </script>
Several ways to implement global event bus objects
Method 1 is also the method I use myself (recommended, simple)
The general idea is: in main.js, which is the entry file, we are on the prototype of vue Add a bus object;
The specific implementation method is as follows:
The following component A and component B can be any two components in the project
//在mian.js中 Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象 //组件A中,监听事件 this.bus.$on('updata', function(data) { console.log(data) //data就是触发updata事件带过来的数据 }) //组件B中,触发事件 this.bus.$emit('updata', data) //data就是触发updata事件要带走的数据
The second method is a little troublesome, but it is also easy to understand the general implementation idea: Create a new bus.js file and instantiate vue in this file; then introduce this in component A and component B respectively. bus.js file, hang event monitoring and event triggering on the bus.js instance, so that global monitoring and triggering can be achieved
Write an example
bus.js file
// bus.js文件 import Vue from 'vue' export default new Vue()
Component A
// 组件A ,监听事件send <template> <div> <span>{{name}}</span> </div> </template> <script> import Bus from './bus.js' export default { data () { return { name: '' } }, created() { let _this = this // 用$on监听事件并接受数据 Bus.$on('send', (data) => { _this.name = data console.log(data) }) }, methods: {} } </script>Component B
// 组件B, 触发事件send
<template>
<div>
<input>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
elValue: '我是B组件数据'
}
},
methods: {
// 发送数据
onClick() {
Bus.$emit('send', this.elValue)
}
}
}
</script>
In this way we have completed a simple value transfer between non-parent and child components.
The above is the detailed content of Introduction to the use of value transfer and event bus (eventbus) in Vue non-parent-child components. For more information, please follow other related articles on the PHP Chinese website!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

Vue中如何通过事件总线实现组件之间的通信,需要具体代码示例事件总线是Vue中一种常见的组件通信机制,它允许不同组件之间进行简洁、灵活的通信,而无需显式地引入父子组件关系或使用Vuex等状态管理库。本文将介绍Vue中如何通过事件总线实现组件之间的通信,并提供具体的代码示例。什么是事件总线?事件总线是一种用于在组件之间传递消息的机制。在Vue中,我们可以利用V

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


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

SublimeText3 Chinese version
Chinese version, very easy to use

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)