1dialog组件
子组件:templateDialog.vue
<template>
<div>
<el-dialog
width="60%"
title="模板名称"
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<div>{{data}}</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="handleCancel">取 消</el-button>
<el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'templateDialog',
props: {
dialogVisible: {
type: Boolean,
default: false,
},
data: {
type: String,
default: '',
},
},
data() {
return {}
},
created() {
console.log('asaskj')
},
methods: {
handleClose() {
this.$emit('close-dialog')
},
handleCancel() {
this.$emit('handle-cancel')
},
handleConfirm() {
let val = '我是子组件'
this.$emit('handle-confirm', val)
},
},
}
</script>
<style scoped>
</style>
2、父组件使用
父组件:index.vue
<template>
<div>
<templateDialog
:dialog-visible="dialogVisible"
:data="data"
@close-dialog="closeDialog"
@handle-cancel="handleCancel"
@handle-confirm="handleConfirm"
></templateDialog>
<div>{{childData}}</div>
<el-button type="primary" @click="dialogVisible = true">
<i class="el-icon-plus el-icon--left" />
打开弹窗
</el-button>
</div>
</template>
<script>
import templateDialog from './templateDialog.vue'
export default {
components: {
templateDialog,
},
data() {
return {
dialogVisible: false,
data: '父组件过来的值',
childData: '',
}
},
methods: {
closeDialog() {
this.dialogVisible = false
},
handleCancel() {
this.dialogVisible = false
},
handleConfirm(val) {
console.log('子组件传过来的值:', val)
this.childData = val
this.dialogVisible = false
},
},
}
</script>
3.效果图
点击打开弹窗
关闭弹窗,获取弹窗值