Issue with emitting events from child to parent component

Question

Issue with emitting events from child to parent component

<div @ontabselected="sayHelloFromRoot">
    <tabs>
        <tab></tab>
        <tab></tab>
    </tabs>
</div>

I have set up an event listener called ontabselected in the Tabs component and I'm emitting it like this:

this.$emit('ontabselected', tab);

The method sayHelloFromRoot is defined in the root Vue instance and all it does is log 'hello' to the console:

sayHelloFromRoot(){
    console.log('hello');
}

When I switch between tabs, I can see the event being emitted in vue-devtools, but strangely, 'hello' is not printed in the console.

javascript vue.js

Answer 1

Answer №1

Solution

To properly handle events, it is recommended to listen on the <tabs> element instead of the <div>. Here is an example:

<div>
  <tabs @ontabselected="sayHelloFromRoot">
    <tab></tab>
    <tab></tab>
  </tabs>
</div>

Explanation

Listening for events follows a similar pattern to other event listeners. Consider this example:

<!-- MyFile.vue -->
<div>
  <button @click="sayHello"/&>
</div>

In essence, you listen for the event on the component or element that triggers the event. For instance, when a user clicks a button, the click event is triggered on the button (not the wrapping <div>). The event is then captured in the parent component (MyFile.vue) rather than within the <button> itself.

Even with basic HTML, the concept remains consistent:

<div>
  <button onclick="console.log('Hello')"/&>
</div>

The inner workings of how the button triggers the event are abstracted, but the interface is known, allowing for event listening.

It can be challenging to identify the specific button triggering the event if event handling were solely implemented in the root component. (credit to @Ferrybig)

Additional Resources

Answer 2

Solution

To properly handle events, it is recommended to listen on the <tabs> element instead of the <div>. Here is an example:

<div>
  <tabs @ontabselected="sayHelloFromRoot">
    <tab></tab>
    <tab></tab>
  </tabs>
</div>

Explanation

Listening for events follows a similar pattern to other event listeners. Consider this example:

<!-- MyFile.vue -->
<div>
  <button @click="sayHello"/&>
</div>

In essence, you listen for the event on the component or element that triggers the event. For instance, when a user clicks a button, the click event is triggered on the button (not the wrapping <div>). The event is then captured in the parent component (MyFile.vue) rather than within the <button> itself.

Even with basic HTML, the concept remains consistent:

<div>
  <button onclick="console.log('Hello')"/&>
</div>

The inner workings of how the button triggers the event are abstracted, but the interface is known, allowing for event listening.

It can be challenging to identify the specific button triggering the event if event handling were solely implemented in the root component. (credit to @Ferrybig)

Issue with emitting events from child to parent component

Answer №1

Solution

Explanation

Additional Resources

Similar questions

Strategies for consistently receiving updates of Iframe content body within a react useEffect hook

The v-for in Vue is not displaying the accurate text in the modal window and is only showing the data for the first item

Initializing data in VueJS for objects that do not already exist

Error: The function `this.xhr_.upload.addEventListener` is not supported in Firebase Storage

How can I make icons larger in ELEMENT UI?

Is my implementation of Model and Views in backbone.js accurate?

Rails - removing list item upon deletion of parent object

What is the best way to pass a bind value in an Angular function controller?

Is there a way to simulate a shift+click event on Vue.js elements using the browser console?

Why is React JS unable to discover my exported modules?

When I scroll, changing the position from fixed to absolute causes my image to jump

AngularJS deferred rendering (not deferred loading views)

Unlocking the Power of Marionette.CompositeView: Passing Parameters to Marionette.ItemView

I am seeking guidance on retrieving the value of a text box that is activated by a radio button through jquery within the provided code

How can I streamline a kendo UI MVC project by eliminating unnecessary components?

What is the best way to organize class usage within other classes to prevent circular dependencies?

Sending an AJAX request to submit a form and receiving a response

Is there a way to show a progress bar that functions as the background for a table row

Guide to displaying a loading message while performing a synchronous AJAX request in a web browser

Getting the values of several labels using a class name - a comprehensive guide