Discover Vue3's efficient event handling feature that allows you to easily listen to events from dynamically generated child components

I am dynamically creating a Vue component and need to listen to the event it emits. While I know that you can use @eventName in the markup, my component is being created using createApp.


const div = document.createElement('div');
this.$refs.login.appendChild(div);

let props = {
   /** some props **/
};

createApp(Component, props).mount(div);

This is how I generate the Component. The answer provided here addresses the issue but it pertains to Vue2, where the $on method has been removed in Vue3.

How can I achieve this in Vue3?

javascriptvue.jsvue-componentvuejs3

Answer №1

To incorporate event handlers, consider utilizing the render function (h). In this method, the second argument passed to h should be an object with keys starting with "on", which will serve as event handlers. For instance, you can include handlers for the click event and a custom event named my-event:

import { h } from 'vue'

const comp = h(Component, {
  onClick: e => console.log('click', e),
  onMyEvent: e => console.log('my-event', e),
})
createApp(comp, props).mount(div)

Try out demo 1 here

If your project supports JSX, you can achieve similar functionality through:

const comp = <Component onClick={e => console.log('click', e)}
                        onMyEvent={e => console.log('my-event', e)} />
createApp(comp, props).mount(div)

Explore demo 2 here

Answer №2

If you are emitting from the child component, you can utilize this method.

Root Component Events# You can add static event listeners to the root component by passing them as props to createApp:

createApp(App, {
  // Listen for the 'expand' event
  onExpand() {
    console.log('expand')
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How does NodeJs handle ongoing tasks and processes seamlessly?

One interesting concept is the Event Loop, which accepts callbacks and executes them as needed. As far as I understand, this operates on a single thread event loop, meaning only one callback is executed at a time. Consider the following example: setInterv ...

javascriptnode.js

Need help troubleshooting a problem with the <tr><td> tag in vue.js?

I have a table that updates when new data is created, and I want to achieve this using Vue.js I decided to explore Vue.js Components and give it a try. <div id="app1"> <table class="table table-bordered"> <tr> ...

javascriptvue.jsvue-component

In Node.js, the `res.send()` function is called before the actual functionality code is executed

As a newcomer to node js, I am currently working on an app where I query the MySql DB and process the results using node js. One issue I have encountered is that if my initial query returns null data, I then need to perform another query and further proc ...

javascriptmysqlnode.jsexpresscallback

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

javascriptreactjsnode.jsgoogle-mapsnext.js

What is the correct way to insert a new key-value pair into an object within the state of functional components?

Is there a way to dynamically add key-value pairs to the initial state of an empty object in functional components, similar to computed property names in class components? I currently have an initial state of {}. const [choice, setChoice] = useState({}) ...

javascriptreactjsnext.js

What types of data are best suited for storage in localStorage?

During the development of my social app with Vue.js and Vuex store, I am contemplating on the best practices for storing parameters in the browser's localStorage. Currently, I retain the 'token' in localStorage, but should I also store &apos ...

javascriptvue.jslocal-storagevuex

The Bootstrap-vue table stops displaying details when the data is refreshed

I am utilizing a bootstrap-vue table that is connected to a computed property pulling data from my vuex store. Each row contains a show_details button that expands a second row, following the guidelines here: The issue arises when there are changes in th ...

vue.jsvuexbootstrap-vue

I successfully coded a function without utilizing the function key, but unfortunately I am encountering difficulties when trying to output the

I have created a function without using the function keyword. The function should take the age above 15 and push it into an array. I have been able to do that, but I am struggling to print the result. Can anyone help me with this? my code <script> ...

javascriptphpnode.jsphp-7

The functions.php file is failing to execute the JavaScript files located in the js folder

I've been attempting to incorporate a JS accordion into my Wordpress blog, but I seem to be encountering issues with the accordion.js file not loading through the functions.php file. Interestingly enough, when I manually add the js code in the header ...

javascriptphpwordpress

AngularJS date formatting fails to properly format dates

{{ map.thedate }} The result is 2014-06-29 16:43:48 Even after using the following code, it still displays the same date as above. {{ map.thedate | date:'medium' }} ...

javascriptangularjs

Searching for #row-information within a b-table

I've been attempting to showcase tasks in a b-table alongside subtasks that are associated with each task. I'm struggling to use the filter method effectively and I'm unsure about where to place the "v-if" statement. <b-table :items=& ...

vue.jsbootstrap-vue

Mismatch of data types in Google Visualization

I am working with Google Visualization and receiving Unix Epoch timestamps that I need to convert into an array of strings for use in Google Charts. However, I keep encountering an error: Type mismatch. Value 2017-8-25 16:23:54,2017-8-25 16:11:54,... does ...

javascriptarraysjsondatetimegoogle-visualization

What is the best way to create a moving line using EaselJS and TweenJS?

My objective is to animate a line from point A to point B using the Tween function. I am utilizing the EaselJS drawing library and TweenJS for animation. Can I achieve this by using the moveTo function to animate a straight line from point A to point B? ...

javascriptcanvascreatejseaseljstween.js

I am facing difficulties displaying the egin{cases}…end{cases} equation using Jekyll's MathJax

MathJax is used on our course website. We have implemented MathJax in Jekyll and hosted it on GitHub pages. While MathJax works well for simple equations, I have faced difficulties with more complex ones. Despite spending hours investigating and experiment ...

javascripthtmlmarkdownjekyllmathjax

Using AngularJS, you can pass serialized objects as query string parameters

I'm trying to pass nested objects as query parameters from my AngularJS Controller using the following code: $scope.redirect = function () { const params = $httpParamSerializer({ initval: { user: { id: 1, ...

javascriptangularjsangularjs-1.6

What is a way to automatically run a function at specific intervals in PHP, similar to the setTimeout() function in JavaScript?

I have a JavaScript code snippet that looks like this: setTimeout('$.ajaxCall("notification.update", "", "GET");', 1000); Now, I want to execute the following PHP function every 1000 milliseconds, similar to the above JavaScript code: $notific ...

javascriptphpfunctioncronsettimeout

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

javascriptjquerycss

Poor quality picture captured with the use of the getUserMedia() Javascript function

Is there a way to improve the resolution of mobile phone camera screenshots taken with JavaScript's getUserMedia function? if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({ video: { width: { min: 1280, }, heig ...

javascripthtmlcameragetusermedia

"Exploring the realms of AngularJS through callback functions and variable scopes

I am currently experiencing an issue with JavaScript in general. Specifically, I am trying to update a list after invoking a callback from two separate files. Here is the description of the callback : this.modify = function(){ var self = this; v ...

javascriptangularjscallback

Having Trouble with QR Code Generator Functionality

UPDATE: The initial code has been updated to implement the recommendations provided. I am currently working on a QR Code generator that updates every minute. Although I have developed the code below, I am encountering some errors and could use some assist ...

javascriptvue.jsvuejs3qr-code