RT, I need to load different components according to the parameters of the page. The component contains the form data. Logically, I emit the data in the child component back to the parent component, and the parent component listens to the data returned by the component, but it doesn"t seem to work. The data can"t be printed. I don"t know what"s wrong. Ask the boss for help.
attach the code, which is the parent component:
<template>
<div class="approvals-create-page p-4">
<div class="card">
<div class="card-body">
<div class="mx-auto">
<component :is="component"
v-on:form-data="handleFormData">
</component>
</div>
</div>
</div>
</div>
</template>
<script>
import leave from "./forms/_leave";
export default {
components: {
leave
},
created () {
let currentPageType = this.$route.params.type;
this.component = currentPageType ? currentPageType : "leave";
},
data () {
return {
component: "",
form: {
fields: {},
reviewer: [],
cc: []
}
}
},
methods: {
//
handleFormData (data) {
this.form.fields = data;
console.log(this.form);
}
}
}
</script>
this is a subcomponent:
<script>
export default {
data() {
return {
form: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
}
}
},
methods: {
onSubmit() {
this.$emit("formData", this.form);
}
}
}
</script>