el-dialog弹窗监听传值

这个城市看过美也看过丑陋，看过豪华的当然更多是简陋，我们试着在这钢筋结构中，搓出一点火星将渴望自由灵魂解救

假期结束背上你的行囊，起航

[ 在这里感谢"我是一名好程序员" https://www.cnblogs.com/wangqi2019/]

话不多说这个小demo是这个样子的

点击新建按钮( 父组件新建按钮 )使弹窗显示也就是elementUI中的el-dialog( 需要自己改结构和样式 )

 弹窗( 子组件弹窗 )显示后输入内容相对应操作,点击叉号或取消按钮隐藏并清空输入的所有内容，点击提交成功后隐藏弹窗并清空输入的内容，

 操作的时候会涉及到传值问题父子传值( dialogFormVisible控制显示隐藏true显示、false隐藏 )

 

新建vue文件用来创建弹窗 common -> createVenue( 子组件 )

<template>
  <div class="createNewFormBox">
    <el-dialog title="新建场馆" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="场馆编号" prop="name" class="el_btn_from">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入场馆编号"
          ></el-input>
        </el-form-item>
        <el-form-item class="bottomBtn">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="background:#688EF7;width:97px"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')" style="width:97px"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import "iview/dist/styles/iview.css";
export default {
  components: {},
  //监听
  watch: {
    isFlag() {
      this.dialogFormVisible = true;
    }
  },
  //通过props传一个布尔( 属性传值 )
  props: {
    isFlag: Boolean
  },
  data() {
    return {
      // dialogFormVisible控制显示隐藏
      dialogFormVisible: false,隐藏状态
      formLabelWidth: "120px",
      ruleForm: {
        name: ""
      },
      rules: {
        name: [{ required: true, message: "请输入场馆编号", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 提交事件
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.newList();
          this.$Message.success("提交成功");
          this.$refs[formName].resetFields();
          this.dialogFormVisible = false; // 提交成功后隐藏弹窗
        } else {
          this.$Message.error("请输入完整信息");
          return false;
        }
      });
    },
    // 取消事件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false; // 点击取消隐藏弹窗

 } } }; </script> 

在对应的组件中也就是父组件通过点击事件使弹窗显示

使用这个弹窗的组件中先引入
import CreateVenue from "../../common/createVenue/index";

随便放一个位置使用
并绑定在子组件中传来的属性
<CreateVenue :isFlag="flage"></CreateVenue>

data中定义一个flag为false
data() {
    return {
             flage: false
        {

  },

点击事件中改变flag
this.flage = !this.flage;