我正在處理發票，我想使用模式添加新客戶，然后將添加的資料回傳以創建發票頁面（父頁面）。我嘗試了很多以前的問題，但仍然無法弄清楚，如何正確使用$emit此處正確使用。如何將資料從模態傳遞給父..
這是到目前為止的代碼。
這是 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: "[email protected]",
phone: "",
address: "",
city: "",
country: "",
taxCode: "",
Type: "",
},
}
}
</script>
這是 ClientAddForm.vue 模態
<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>
uj5u.com熱心網友回復：
您發出事件并傳遞資料this.$emit('updated', this.client)
在父組件中，您從子組件和觸發方法監聽事件@updated="handleUpdate"
看看下面的代碼片段：
Vue.component('client-add-form', {
template: `
<div style="width: auto">
<header >
<p >Add/Modify Customer Information</p>
</header>
<section >
<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 >
<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: "[email protected]",
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484184.html
標籤：javascript Vue.js Vuejs2 nuxt.js