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;