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子组件。

javascript 复制代码

<template>
  <el-dialog
    title="添加商品"
    :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-picker
            type="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、使用子组件。

javascript 复制代码

<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>

效果图：