問題：
table 操作欄 自定義按鈕 需要彈出窗口 ，窗口封裝成組件 父組件調用子組件的 dialog
需要兩個文件 1. list.uve 2.UserInfoDialog.vue
效果如下
setp1:
list.vue 中 頁面加入
<!-- 客戶信息彈窗 -->
<UserInfoDialog :shDialog="shDialog" @closeShDialog="closeShDialog" />
引入 子組件文件
定義dialog 開關
setp2:
UserInfoDialog.vue
<template>
<div>
<el-dialog v-model="imgsDialogVisible" append-to-body="true" @closed="handleClose">
<img width="100%" :src="exhibitImg" alt="" />
<div>1111111111</div>
<span class="dialog-footer">
<el-button @click="imgsDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgsDialogVisible = false"
>確 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElUpload } from "element-plus";
export default {
components: {},
props: {
shDialog: {
type: Boolean,
default: false,
},
},
watch: {
shDialog(val) {
this.imgsDialogVisible = val;
},
},
setup(props, context) {
// 圖片展示彈窗
const imgsDialogVisible = ref(false);
onMounted(() => {
imgsDialogVisible.value = props.shDialog;
});
const handleClose = (ret) => {
context.emit("closeShDialog");
};
return {
imgsDialogVisible,
handleClose,
};
},
};
</script>
子組件重點
props，watch，onMounted，emit
props，接收父組件的值
watch，監聽父組件的值
emit，調用父組件的方法