this.$emit 在 Vuejs 中将值从子组件传递给父组件时不起作用

Question

The method listening to the event called by this.$emit is not getting called and I am not able to retrieve the value from child to parent component in Vuejs.

The Contact.vue is the parent component where I need to display the value that I am capturing from the ContactDetails child component through a form.

<template>
  <div>
    <h3>Contact Details</h3>
    <br /><br />
    <form>
      <div class="form-group">
        <label>Business Name</label>
        <input
          type="text"
          class="form-control"
          v-model="contact.businessName"
        />
      </div>
      <div class="form-group">
        <label>Contact Person</label>
        <input
          type="text"
          class="form-control"
          v-model="contact.contactPerson"
        />
      </div>
      <div class="form-group">
        <label>Address</label>
        <textarea
          type="text"
          class="form-control"
          v-model="contact.address"
        ></textarea>
      </div>
      <div class="form-group">
        <label>Contact Number</label>
        <input
          type="text"
          class="form-control"
          v-model="contact.contactNumber"
        />
      </div>
      <div class="form-group">
        <label>Category of Business</label>
        <select id="inputState" class="form-control">
          <option
            v-for="category in category"
            :key="category.categoryCode"
            :selected="(contact.selectedCategory = category.categoryCode)"
            >{{ category.categoryText }}</option
          >
        </select>
      </div>
      <button class="btn btn-primary" @click.prevent="submitRequest">
        Submit Contact
      </button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contact: {
        businessName: "",
        contactPerson: "",
        address: "",
        contactNumber: "",
        selectedCategory: ""
      },
      category: [
        {
          categoryText: "Food",
          categoryCode: 1
        },
        {
          categoryText: "Medicine",
          categoryCode: 2
        },
        {
          categoryText: "Shop",
          categoryCode: 3
        },
        {
          categoryText: "Housekeeping",
          categoryCode: 4
        }
      ]
    };
  },
  methods: {
    submitRequest() {
console.log(this.contact);
      this.$emit("submittedContact", this.contact.businessName);
    }
  }
};
</script>
<style scoped></style>

<template>
  <div>
    <contact-detail @submittedContact="contact = $event"></contact-detail>
    <contact-summary> </contact-summary>
  </div>
</template>
<script>
import ContactDetails from "./ContactDetails.vue";
import ContactSummary from "./ContactSummary.vue";
export default {
  data() {
    return {
      contact: {
        businessName: "",
        contactPerson: "",
        address: "",
        contactNumber: "",
        selectedCategory: ""
      }
    };
  },
  methods: {
    submittedContact() {
      console.log(this.contact);
    }
  },
  components: {
    "contact-detail": ContactDetails,
    "contact-summary": ContactSummary
  }
};
</script>

Mentioned above are the code for the parent component and the child component.

Answer 1

Change this to:

<contact-detail @submittedContact="contact = $event"></contact-detail>

to

<contact-detail @submittedContact="submittedContact"></contact-detail>

@submittedContact means your parent is listening for an event named submittedContact from your component contact-detail and "submittedContact" refers to the method it will call when it hears that event.

and change your method body to:

  methods: {
    submittedContact(contact) {
      // and maybe here you can set this.contact = { ...contact }
      console.log(contact);
    }
  },