个人比较喜欢用这种的 通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式
<template>
<div>
<el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button>
<Dialog ref="Dialog"></Dialog>
</div>
</template>
<script>
import Dialog from '@/components/Dialog.vue'
export default {
components: {
Dialog
},
data() {
return {
}
},
methods: {
handleDialogOpen() {
this.$refs.Dialog.open('打开弹窗')
}
},
mounted() {
}
}
</script>
<style lang="less" scoped></style>
<template>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
},
methods: {
open(value) {
console.log(value, '父组件传递过来的值')
this.dialogFormVisible = true
}
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<dialogForm/>
</el-dialog>
</div>
</template>
<script>
import dialogForm from '@/components/form.vue'
export default {
components: {
dialogForm
},
data() {
return {
dialogFormVisible: false
}
},
methods: {
handleDialogOpen() {
this.dialogFormVisible = true
}
},
mounted() {
}
}
</script>
<style lang="less" scoped></style>
<template>
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
},
methods: {
open(value) {
console.log(value, '父组件传递过来的值')
this.dialogFormVisible = true
}
}
}
</script>
<style lang="scss" scoped>
</style>
其他方式可自行探索