Laravel 9:从子组件向父组件发出事件时出现问题

Question

在我的Laravel 9项目中，我有一个父组件，其模板包括一个子组件。

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>

单击父组件中的按钮后，我将is_visible设置为true，通过v-if渲染子组件。在子组件中，当我按下一个按钮时，它会调用一个向父组件发出事件的方法。

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

在父组件中，我有一个方法。

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

当我单击子组件中的关闭按钮时，它会在子组件中调用CloseNow((，我在console.log中看到了这一点。但是，该事件不会发送到父组件。我已经尝试了所有我能在网上找到的建议。此外，我在开发人员控制台中没有看到任何错误。

有人能告诉我，我的代码中有什么问题阻止了事件从子组件向父组件发出吗？

提前谢谢。

Answer 1

问题是没有任何内容引用您所做的发射。如果你有这个：

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

当您调用子组件时，应该提到close_note。应该是这样的：

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

其中EmitName为close_note，您调用的函数具有相同的名称。此介质可以使用：https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa