在 vue 中使用 Props 从子模态数据更新父数据

Question

我正在处理发票，我想使用模态添加新客户，然后获取添加的数据以创建发票页面（父页面）。我已经尝试过许多以前的问题，但仍然无法弄清楚，如何在这里正确使用 $emit 。如何将数据从模态传递到父级..

这是目前的代码。

this is createInvoice.vue

<template>
   <button @click="isComponentModalActive = true">
       Add New Client
   </button>

   <b-modal
      v-model="isComponentModalActive"
       has-modal-card
       full-screen
       :can-cancel="false"
    >
      <client-add-form v-bind="form.clientData"></client-add-form>
    </b-modal>
</template>

<script>
import ClientAddForm from '../../../components/ClientAddForm.vue';
export default {
  components: { ClientAddForm },
    data() {
    return {
      isComponentModalActive: false,
      form: {
        clientData: {
          name: "Gaurav Kumar",
          email: "imthegrv@gmail.com",
          phone: "",
          address: "",
          city: "",
          country: "",
          taxCode: "",
          Type: "",
        },
       }
}
</script>

this is ClientAddForm.vue Modal

    <template>
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">Add/Modify Customer Information</p>
        </header>
        <section class="modal-card-body">
          <b-field label="Name">
            <b-input type="text" :value="name" placeholder="Name"> </b-input>
          </b-field>
          <b-field label="Phone">
            <b-input type="phone" :value="phone" placeholder="Phone"> </b-input>
          </b-field>
          <b-field label="Email">
            <b-input type="email" :value="email" placeholder="Email"> </b-input>
          </b-field>
          <b-field label="Address">
            <b-input type="textarea" :value="address" placeholder="Address">
            </b-input>
          </b-field>
          <b-field label="City">
            <b-input type="text" :value="city" placeholder="City"> </b-input>
          </b-field>
          <b-field label="Country">
            <b-input type="text" :value="country" placeholder="Country"> </b-input>
          </b-field>
        </section>
        <footer class="modal-card-foot">
          <b-button label="Close" @click="$parent.close()" />
          <b-button label="Save" type="is-primary" @click="Update()"  />
        </footer>
      </div>
   </template>
    
    
  <script>
    export default {
      props: ["email", "phone", "name", "city", "country", "address"],
    
      methods: {
        Update(){
           //Database Operations etc
           this.$emit()
        }
      }
    }
 </script>

Answer 1

您发出事件并传递数据this.$emit('updated', this.client) 在父组件中，您监听来自子组件的事件和触发方法 @updated="handleUpdate"

请查看以下代码片段：

Vue.component('client-add-form', {
  template: `
    <div class="modal-card" style="width: auto">
      <header class="modal-card-head">
        <p class="modal-card-title">Add/Modify Customer Information</p>
      </header>
      <section class="modal-card-body">
        <b-field label="Name">
          <b-input type="text" v-model="client.name" placeholder="Name"> </b-input>
        </b-field>
        <b-field label="Phone">
          <b-input type="phone" v-model="client.phone" placeholder="Phone"> </b-input>
        </b-field>
        <b-field label="Email">
          <b-input type="email" v-model="client.email" placeholder="Email"> </b-input>
        </b-field>
        <b-field label="Address">
          <b-input type="textarea" v-model="client.address" placeholder="Address">
          </b-input>
        </b-field>
        <b-field label="City">
          <b-input type="text" v-model="client.city" placeholder="City"> </b-input>
        </b-field>
        <b-field label="Country">
          <b-input type="text" v-model="client.country" placeholder="Country"> </b-input>
        </b-field>
      </section>
      <footer class="modal-card-foot">
        <b-button label="Close" @click="$parent.close()" />
        <b-button label="Save" type="is-primary" @click="update" />
      </footer>
    </div>
  `,
  props: ["formData"],
  data() {
    return {
      client: {...this.formData}
    }
  },
  methods: {
    update(){
       //Database Operations etc
       this.$emit('updated', this.client)
       this.$parent.close()
    }
  },
})

new Vue({
  el: '#demo',
  data() {
    return {
      isComponentModalActive: false,
      form: {
        clientData: {
          name: "Gaurav Kumar",
          email: "imthegrv@gmail.com",
          phone: "",
          address: "",
          city: "",
          country: "",
          taxCode: "",
          Type: "",
        },
      }
    }
  },
  methods: {
    handleUpdate(client) {
      this.form.clientData = client
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<div id="demo">
  <button @click="isComponentModalActive = true">
    Add New Client
  </button>
  <b-modal
     v-model="isComponentModalActive"
     has-modal-card
     full-screen
     :can-cancel="false"
  >
    <client-add-form 
      :form-data="form.clientData" 
      @updated="handleUpdate"
    ></client-add-form>
    </b-modal>
    {{ form }}
</div>

在 vue 中使用 Props 从子模态数据更新父数据

Update Parent Data from Child Modal Data using Props in vue

javascript

vue.js

vuejs2

nuxt.js