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[=28 呈现子组件=].在子组件中，当我按下一个按钮时，它会调用一个向父组件发出事件的方法。

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>

其中 theEmitName 是 close_note 并且您调用的函数具有相同的名称。这种媒体可能很有用：https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa

Laravel 9：从子组件到父组件发出事件时出现问题

Laravel 9: Problem emitting event from child component to parent

laravel

vue-component