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;