Laravel 9: Problem emitting event from child component to parent

Question

In my Laravel 9 project, I have a parent component, whose template includes a child component.

template>
.... 
.... 
<div v-if=item.is_visible  class="col-4">
                <note-details-modal-component v-bind:is_visible=item.is_visible :note_id= item.id> 
                </note-details-modal-component> 

</div>

On clicking a button in the parent component, I set is_visible to true that renders the child component through v-if. In the child component, when I press a button, it calls a method that emits an event to the parent.

closeNow: function() {
              console.log('closeNow'); 
            //  this.$parent.$emit('close_note',false);  
              this.$emit('close_note',false); 
            } ,    

In the parent component, I have a method.

close_note(value)
        {
           console.log('In parent');
           this.is_visible = ! this.is_visible; 
        },

When I click the close button in the child component, it calls CloseNow() in the child component, and I see that in the console.log. However, that event does not emit to the parent. I have tried all suggestions that I could find on the web. Also, I do not see any errors in the Dev console.

Could someone please tell me what's wrong in my code that is preventing the event from emitting from the child component to parent?

Thanks in advance.

Answer 1

The thing is that nothing refer to the emit you made. If you have this:

closeNow: function() {
    console.log('closeNow'); 
    this.$emit('close_note',false); 
}

You should mention the close_note when you call the child component. It should be something like that:

<note-details-modal-component v-bind:is_visible=item.is_visible :note_id= item.id @theEmitName="theFunctionYoucall"> 
</note-details-modal-component>

where theEmitName is close_note and the function you call has the same name. This medium can be usefull : https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa