我的父组件名称为StudentComponent，在其中，我有一个创建学生并进行更新的模式，当在父组件中使用模式时，它工作正常，但是当我将其自己的模式组件分开时，并在父级中调用它不起作用，当我单击“编辑”按钮时它处于打开状态，但数据无法以模式操作，这是下面的代码...
StudentComponent （父母）
<template>
<div id="student">
<span style="position: absolute; right: 1rem; top: .5rem;">
<button type="button" class="btn btn-success" @click="create()">
Add New <i class="fa fa-plus"></i>
</button>
</span>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tbody>
<tr class="text-center" v-show="students.length" v-for="(student, index) in students"
:key="student.id">
<td>{{ index+1 }}</td>
<td>{{ student.name }}</td>
<td>{{ student.email }}</td>
<td>{{ student.phone }}</td>
<td>{{ student.address }}</td>
<td>
<button @click="edit(student)" type="button" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--my modal-->
<student-modal
:edit="editMode"
/>
</div>
</template>
<script>
import ModalComponent from './partial/ModalComponent';
export default {
components:{
"student-modal" : ModalComponent,
},
data() {
return {
editMode : false,
form: new Form({
id: '',
name: '',
email: '',
phone: '',
address: '',
})
}
},
mounted() {
this.getStudents();
},
methods : {
getStudents() {
this.$Progress.start();
axios
.get('/api/students?page=' + this.pagination.current_page)
.then(response => {
this.students = response.data.data;
this.pagination = response.data.meta;
this.$Progress.finish();
})
.catch(e => {
console.log(e);
this.$Progress.fail();
})
},
create() {
this.editMode = false;
$('#createStudent').modal('show');
this.clearForm();
},
store() {
this.$Progress.start();
this.form.busy = true;
this.form.post('/api/students')
.then(response => {
this.getStudents();
//$('#createStudent').modal('hide');
if (this.form.successful) {
this.clearForm();
this.$Progress.finish();
this.$snotify.success('Student create successfully', 'Success')
} else {
this.$Progress.fail();
this.$snotify.error('Something wrong, try again.!', 'Error')
}
})
.catch(e => {
this.$Progress.fail();
console.log(e)
})
},
edit(student) {
this.editMode = true;
this.clearForm();
this.form.fill(student);
$('#createStudent').modal('show');
},
update() {
this.$Progress.start();
this.form.busy = true;
this.form.patch('/api/students/' + this.form.id)
.then(response => {
this.getStudents();
$('#createStudent').modal('hide');
if (this.form.successful) {
this.clearForm();
this.$Progress.finish();
this.$snotify.success('Student update successfully', 'Success')
} else {
this.$Progress.fail();
this.$snotify.error('Something wrong, try again.!', 'Error')
}
})
.catch(e => {
this.$Progress.fail();
console.log(e)
})
},
}
}
</script>
ModalComponent （子级），我正在使用相同的模式来创建和更新
<template>
<div id="studentModal">
<div class="modal fade" id="createStudent" tabindex="-1" role="dialog" aria-
labelledby="studentModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="studentModalTitle">{{ edit ? 'Update' : 'Create' }}
Student</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="edit ? update() : store()" @keydown="form.onKeydown($event)">
<div class="modal-body">
<alert-error :form="form"/>
<div class="form-group">
<label for="name" class="font-weight-bold">Name</label>
<input type="text" v-model="form.name" class="form-control" :class="{
'is-invalid': form.errors.has('name') }" id="name" name="name"
placeholder="Your Name">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<label for="email" class="font-weight-bold">Email</label>
<input type="email" v-model="form.email" class="form-control" :class="{
'is-invalid': form.errors.has('email') }" name="email" id="email"
placeholder="Email hare">
<has-error :form="form" field="email"></has-error>
</div>
<div class="form-group">
<label for="phone" class="font-weight-bold">Phone</label>
<input type="tel" v-model="form.phone" class="form-control" :class="{
'is-invalid': form.errors.has('phone') }" name="phone" id="phone"
placeholder="Phone number">
<has-error :form="form" field="phone"></has-error>
</div>
<div class="form-group">
<label for="address" class="font-weight-bold">Address</label>
<textarea class="form-control" v-model="form.address" :class="{ 'is-
invalid': form.errors.has('address') }" name="address" id="address"
placeholder="Your address"></textarea>
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button :disabled="form.busy" type="submit" class="btn btn-primary">
{{ edit ? 'Update' : 'Create' }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ModalComponent",
props : {
edit : Boolean,
},
data() {
return {
form: new Form({
id: '',
name: '',
email: '',
phone: '',
address: '',
})
}
}
}
</script>
如何创建此数据并将其更新为父级？
答案 0 :(得分：2)
使用事件。
在您的子组件中，提交表单时会发出一个create事件（或您希望为其命名的任何事件），并将希望发送给父级的数据添加到该事件中（我称formData）。
示例：
<form @submit.prevent="$emit('create', formData)" @keydown="form.onKeydown($event)">
在您的父组件中，将您的自定义事件绑定到您要执行的方法（我将其称为createMethod）。
示例：
<student-modal :edit="editMode" @create="createMethod"/>
然后要做的就是确保通过事件传递的数据是父级上需要的数据。
以下是带有功能示例的小提琴：Request parameters