Element UI中el-dialog作为子组件如何由父组件控制显示/隐藏~

1、这里介绍的是将el-dialog作为组件封装便于复用，如何通过父组件控制子组件dialog的显示与隐藏。

2、思路:首先el-dialog是通过dialogVisible的值是否为true或false来控制显示与隐藏的。那么我们可以通过父传子props来将true（即showFlag的值）传递给dialog子组件，然后在子组件中监听showFlag值的变化，一旦出现变化就将showFlag的值赋值给dialogVisible，以此来实现dialog组件的显示。

如何控制隐藏呢？或者说如何实现二次点击显示？

思路：首先我们通过子传父$emit传递一个自定义事件hiddenFlag给父组件，然后在父组件中触发该方法，将showFlag的值变为false即可。

3、还有一种方法就是通过给子组件添加v-if来控制，根据个人爱好来选择吧。

4、封装dialog子组件。

<template><el-dialogtitle="添加商品":visible.sync="dialogVisible"width="40%":before-close="handleClose"style="text-align: center; line-height: 20px"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="活动名称" prop="newName"><el-input v-model="ruleForm.newName"></el-input></el-form-item><el-form-item label="活动日期" required><el-form-item prop="newData"><el-date-pickertype="date"placeholder="选择活动日期"v-model="ruleForm.newData"style="width: 100%"></el-date-picker></el-form-item></el-form-item><el-form-item label="活动地址" prop="newAddress"><el-input v-model="ruleForm.newAddress"></el-input></el-form-item><el-form-item label="爱好" prop="newLikes"><el-input v-model="ruleForm.newLikes"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="Cancel()">取 消</el-button><el-button type="primary" @click="determine()">确 定</el-button></span></el-dialog>
</template>
<script>
export default {name: "diaLog",data() {return {dialogVisible: false,ruleForm: {newName: "",newAddress: "",newData: "",newLikes: "",},rules: {newName: [{ required: true, message: "请输入活动名称", trigger: "blur" },],newAddress: [{ required: true, message: "请选择活动区域", trigger: "blur" },],newData: [{type: "date",required: true,message: "请选择日期",trigger: "change",},],newLikes: [{ required: true, message: "请输入爱好", trigger: "blur" }],},};},props: ["showFlag"],watch: {// 监听父组件传递过来的showFlag的变化,控制dialog的显示showFlag() {this.dialogVisible = this.showFlag;},},methods: {// 关闭弹窗handleClose(done) {done();this.$emit("hiddenFlag");},//   取消Cancel() {this.$emit("hiddenFlag");},//   确定determine() {this.$emit("hiddenFlag");},},
};
</script><style></style>

5、使用子组件。

<template><div><el-button type="primary" @click="addGoods()">添加商品</el-button><!-- 对话框 --><diaLog :showFlag="showFlag" @hiddenFlag="hidden()"></diaLog></div>
</template><script>
import diaLog from "../components/dialog.vue";
export default {name: "newUser",data() {return {showFlag: false,};},components: {diaLog,},methods: {// 添加商品addGoods() {// 展示弹窗this.showFlag = true;},// 接收dialog组件传递过来的隐藏弹窗信息hidden() {this.showFlag = false;}},
};
</script><style></style>

效果图：