Vue.js子父组件间无事件触发问题及组件代码求助

Hey there! Let’s work through this event communication problem between your parent and child components. Based on the code snippet you shared, here are the most common fixes and checks to get your events firing properly:

1. Make Sure the Child Component Emits Events Correctly #

First, confirm your modal form (child component) is actually emitting events using Vue’s $emit method. For example, if your modal has a submit action, the child should trigger an event like this:

<!-- Child Modal Component -->
<template>
  <b-modal @ok="handleFormSubmit">
    <!-- Your form fields go here -->
  </b-modal>
</template>

<script>
export default {
  methods: {
    handleFormSubmit() {
      // Validate your form data first
      const formData = { /* your form values */ };
      // Emit the event to the parent, optionally passing data
      this.$emit('form-submitted', formData);
      console.log('Emitted form-submitted event to parent'); // Add this for debugging
    }
  }
}
</script>

2. Ensure the Parent Listens for the Emitted Event #

In your parent component (the one with the alert and pagination code you shared), you need to attach a listener to the child component tag. This tells the parent to react when the child emits the event:

<!-- Parent Component -->
<template>
  <div>
    <!-- Your existing alert and pagination code -->
    <child-modal-form @form-submitted="handleChildFormSubmission" />
  </div>
</template>

<script>
import ChildModalForm from './ChildModalForm.vue'; // Import your child component

export default {
  components: { ChildModalForm },
  methods: {
    handleChildFormSubmission(formData) {
      console.log('Received event from child! Data:', formData); // Debug log
      // Add your logic here (API calls, state updates, etc.)
    }
  }
}
</script>

3. Double-Check Event Name Spelling & Case #

Vue event names are case-sensitive when using template syntax. If your child emits formSubmitted, the parent should listen for @form-submitted (kebab-case, recommended for templates) or @formSubmitted (camelCase). A tiny typo here is one of the most frequent causes of missing events.

4. Verify BootstrapVue Modal Event Hooks #

If you’re using BootstrapVue’s b-modal, make sure you’re leveraging the correct built-in events. For example:

• @ok triggers when the default OK button is clicked
• @cancel triggers when the modal is closed/canceled
  If you’ve customized the modal’s footer buttons, ensure those buttons are explicitly calling your emit method (instead of relying on default modal events).

5. Debug with Console Logs #

Add quick console logs in both the child’s emit method and the parent’s handler to narrow down where the issue is:

• If the child’s log shows up but the parent’s doesn’t: The parent isn’t listening correctly (check event name or component registration)
• If neither log shows up: The child isn’t triggering the emit at all (check if the modal action is firing your handler)

内容的提问来源于stack exchange，提问作者fghf