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

【问题标题】：this.$emit not working while passing the value from child to parent component in Vuejsthis.$emit 在 Vuejs 中将值从子组件传递给父组件时不起作用
【发布时间】：2020-05-02 13:32:39
【问题描述】：

监听 this.$emit 调用的事件的方法没有被调用，我无法在 Vuejs 中从子组件检索到父组件的值。

Contact.vue 是父组件，我需要在其中显示我通过表单从 ContactDetails 子组件捕获的值。

<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>

上面提到的是父组件和子组件的代码。

【问题讨论】：

请提供两个 Vue 实例的代码示例。
@Joe 我已经用我正在使用的代码更新了问题。
你的意思是提交的Contact方法没有在父组件中被调用？
是的，它没有被调用，我无法对我发出的对象执行 console.log。
你必须像这样分配方法名称

标签： javascript vue.js

【解决方案1】：

把这个改成：

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

到

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

@submittedContact 表示您的父级正在从您的组件contact-detail 中侦听名为submittedContact 的event，而"submittedContact" 指的是它在听到该事件时将调用的方法。

并将您的方法主体更改为：

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

【讨论】：