快捷導(dǎo)航

el-dialog對話框子組件的關(guān)閉方法

更新時間：2023年12月27日 14:44:52 作者：Dolores_zsq

這篇文章主要介紹了el-dialog對話框子組件的關(guān)閉方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

el-dialog對話框子組件的關(guān)閉

在子組件對話框中用:before-close關(guān)閉對話框，取消按鍵綁定點擊事件

<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="close">
  <div style="display: flex;justify-content:space-around ;flex: 1;">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" >確 定</el-button>
  </div>
</el-dialog>

子組件把"close"事件傳給父組件

methods: {
        close() {
            this.$emit("close")
        },
    }

父組件中@close接收子組件傳來的“close”事件

<clue-assign-dialog 
  ref="clueAssign" 
  :dialog-visible="dialogVisible" 
  :title="title" 
  @close="dialogVisible = false">
</clue-assign-dialog>

補充：

vue el-dialog封裝成子組件（組件化）

前言

實際開發(fā)過程中我們經(jīng)常聽見組件化開發(fā)，但在實際開發(fā)過程中（沒有人審查時）怎么方便來
我們有時是因為時間不夠，所以把所有代碼寫在一個頁面。當(dāng)業(yè)務(wù)邏輯復(fù)雜時可能會有1k多行
雖然不能要求自己寫出高效復(fù)用性高的組件，把dialog彈出框?qū)懗梢粋€子組件抽走還是可以的
當(dāng)你把表單抽在就會發(fā)現(xiàn)代碼少了很多

代碼實現(xiàn)

1.在文件下創(chuàng)建components文件夾創(chuàng)建DialogForm.vue文件

<template>
  <div>
    <el-dialog
      title="表單"
      :visible="dialogVisible"
      width="45%"
      @close="handleClose"
    >
      <span>子組件彈出框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">關(guān) 閉</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >發(fā)起合同審批</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
?
<script>
export default {
  name: 'DialogForm',
  props: {
    DialogFlag: {
      default: false
    }
  },
  data () {
    return {
      // 開關(guān)
      dialogVisible: false,
    }
  },
  watch: {
    DialogFlag () {
      this.dialogVisible = this.DialogFlag
    }
  },
  created () {
    console.log('審批頁面執(zhí)行')
  },
  methods: {
    // 表單關(guān)閉事件-通知父組件關(guān)閉（.syanc）
    // 不通知父組件可能會報錯，導(dǎo)致只能打開一次
    handleClose () {
      this.$emit('update:DialogFlag', false)
    },
  }
}
</script>

2.在index.vue頁面中使用

// 引入組件
import DialogForm from './components/DialogForm.vue'
?
//注冊組件
 components: {
    DialogForm
  },
//data
 DialogFlag: false
?
// html
<DialogForm :DialogFlag.sync="DialogFlag" />
?
// 使用組件
  <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="examinadd"
              >打開表單</el-button
            >
 examinadd () {
      this.DialogFlag = true
    },

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue el-dialog封裝成子組件（組件化）有了初步的深刻印象，但在實際開發(fā)中我們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

到此這篇關(guān)于el-dialog對話框子組件的關(guān)閉的文章就介紹到這了,更多相關(guān)el-dialog對話框子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: