vue2.js 中 el-dialog封装成子组件(组件化)案例分享
子组件 没有 .sync
<template>
<div>
<el-dialog title="详情" :visible="DialogFlag" width="80%" center @close="handleClose">
<el-table :data="detailsList" style="width: 100%" border>
<el-table-column prop="customerRelease" label="意见" align="center" />
<el-table-column prop="remarks" label="备注" align="center" />
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'DialogForm',
props: {
DialogFlag: {
type: Boolean,
default: false,
},
detailsList: {
type: Array,
default: () => [],
},
},
methods: {
handleClose() {
this.$emit('update:DialogFlag', false);
},
},
};
</script>
父组件
// 引入组件
import DialogForm from './components/DialogForm.vue'
//注册组件
components: {
DialogForm
},
//data
DialogFlag: false
// details
detailsList: null,
// Dom 注意加 .sync
<DialogForm :DialogFlag.sync="DialogFlag" :detailsList="detailsList"/>
// 使用组件
<el-button type="primary" @click="showTable">打开表单</el-button>
showTable () {
this.DialogFlag = true
},