Скачать или смотреть Sending Events from an External JS File to Vue.js Components

Discover how to effectively send events from an external JavaScript file to Vue.js components using eventBus. Learn step-by-step solutions and improve your Vue.js app today!
---
This video is based on the question https://stackoverflow.com/q/67905457/ asked by the user 'محمد علي المالكي' ( https://stackoverflow.com/u/13170085/ ) and on the answer https://stackoverflow.com/a/67905458/ provided by the user 'محمد علي المالكي' ( https://stackoverflow.com/u/13170085/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Send event from external js file to Vuejs component?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Sending Events from an External JS File to Vue.js Components: A Comprehensive Guide

When working with Vue.js, developers often encounter situations where they need to communicate between an external JavaScript file and Vue components. A common challenge arises when integrating services like SignalR to receive real-time data and transmit it to Vue components. In this post, we'll explore how to successfully send events from an external JS file to a Vue.js component using eventBus.

Understanding the Problem

Imagine you're using SignalR in your application to listen for messages that come from an API in real-time. You might have your SignalR logic in an external JavaScript file, and you want to relay the incoming messages to your Vue component. The initial approach might fail because the data isn't transmitted properly to your Vue instance.

Let’s take a look at an illustrative example of what the code might look like when trying to implement SignalR in your external JavaScript file and call it from your Vue component.

Initial Code Structure

External JavaScript File: userHub.js

[[See Video to Reveal this Text or Code Snippet]]

Vue Component File: MyComponent.vue

[[See Video to Reveal this Text or Code Snippet]]

If you attempt this setup, the ReceiveMessagePrivate function will not send data to your Vue component as expected.

The Solution: Implementing EventBus

To overcome this challenge, we can utilize Vue's built-in eventBus. An eventBus is a simple way to create a communication channel that can be used for emitting events and listening for them in your Vue components. Let's break down the implementation steps.

Step 1: Modify the External JavaScript File

You will need to set up an event bus in your external JavaScript file:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update the Vue Component

Next, modify your Vue component to listen for events emitted from the eventBus:

[[See Video to Reveal this Text or Code Snippet]]

How It Works

EventBus Creation: By creating an instance of Vue as an eventBus, we allow different parts of our application to communicate without needing to pass props or emit events through the component tree.

Emitting Events: In the external file, every time a message is received from the SignalR connection, we emit an event called "recMesPri" along with the dataJson, which contains the information we want to use.

Listening for Events: In the Vue component's created lifecycle hook, we listen for the "recMesPri" event. When the event is emitted, we can handle the data as needed, like logging it to the console or updating the component's state.

Conclusion

Using eventBus is an effective way to communicate between an external JavaScript file and Vue components, especially when dealing with real-time data from services like SignalR. By following the steps outlined above, you can seamlessly transmit data and create dynamic, responsive applications.

If you're developing with Vue.js and working with external scripts, make sure to integrate eventBus for efficient communication. Happy coding!