project, many modal boxes are required to submit the form. The beginning and end of the modal box are all the same, and the middle content uses slot to insert different content. Click OK to submit the data to different interfaces.
shared modal box subcomponents:
<template>
<div>
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:width="width"
:slot-key="slotKey"
:show="show"
@close="$emit("update:show", false)">
<slot :name="slotKey" />
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible = false"> </el-button>
<el-button size="small" type="primary" @click="submit"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
methods: {
submit() {
this.$emit("submit")
this.dialogVisible = false
}
}
}
</script>parent component invokes modal box child component:
<base-dialog
:show.sync="show"
:width="width"
:slot-key="slotKey"
:title="title"
@submit="submit">
<template slot="account">
<account-dialog :temp="temp"/>
</template>
<template slot="ban">
<ban-dialog :temp="temp"/>
</template>
</base-dialog>
<script>
export default {
methods: {
submit() {
....
}
}
}
</script>