不是从下一级的emit获取数据

Question

我在下一层的数据上遇到了问题。emit正在工作，但我想要随它一起发送的对象在其他组件中未定义

EditContact.vue

<template>
  <div>
    <b-form @submit="onSubmit">
      <b-form-group id="input-group-1" label="Name:" label-for="input-1">
        <b-form-input
          id="input-1"
          v-model="newcontact.name"        
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-2"
        label="Email address:"
        label-for="input-2"
      >
        <b-form-input
          id="input-2"
          v-model="newcontact.email"
          type="email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-3"
        label="Phone number:"
        label-for="input-3"
      >
        <b-form-input
          id="input-3"
          v-model="newcontact.phone"          
          required
        ></b-form-input>
      </b-form-group>     

      <b-button type="submit" variant="info" style="margil-right: 5px"
        >Change</b-button
      >
    </b-form>
  </div>
</template>


<script>
export default {
  name: "AddContact",
  props: {
    contact: Object,    
  },
  data() {
    return {
      newcontact: {
        id: this.contact._id,
        name: this.contact.name,
        email: this.contact.email,        
        phone: this.contact.phone,
      },
    
    };
  },
  methods: {
    onSubmit(event) {
      event.preventDefault();   

      this.$emit('edit-contact', this.newcontact); // emiting this.newcontact from forum above
    },
  },
};
</script>

在这里，我用EditContact发送contact对象，我想要获取newcontact，它已更改，但当我尝试输出数据(newcontact)时，它是未定义的

<template>
  <div @dblclick="showEdit()" class="contact">
    <!-- <p>{{contact.id}}.</p> -->
    <div class="user">
      <h3>
        {{ contact.name }}
      </h3>
      <i @click="$emit('delete-contact', contact._id)" class="fas fa-times">
      </i>
    </div>
    <div v-if="showEditContact">
      <EditContact :contact="contact"  class="edit" @edit-contact="$emit('edit-contact', newcontact)" />
    </div>
  </div>
</template>

<script>
import EditContact from "./EditContact";

export default {
  name: "Contact",   
  props: {
    contact: Object,   
    
    showEditContact: Boolean,       
  },
  components: {
    EditContact,
  },
  methods:{
    showEdit(){
      this.showEditContact = !this.showEditContact;
    },     
    Edit(newcontact){
      console.log("Contact Level : " + newcontact._id)      
    }
  },
    
};
</script>

我不知道还能做什么，我对你来说是个新手。

Answer 1

应按如下方式定义已发出的事件处理程序：

 <EditContact :contact="contact"  class="edit" @edit-contact="Edit" />

在你的方法中：

 methods:{
    showEdit(){
      this.showEditContact = !this.showEditContact;
    },     
    Edit(newcontact){
      console.log("Contact Level : " + newcontact._id)      
    }
  },