vue中父組件控制子組件的顯示隱藏詳解

更新時(shí)間：2025年10月28日 09:56:30 作者：m0_63466615

文章介紹了在Vue.js中實(shí)現(xiàn)父子組件之間通信的一種方法,通過(guò)在子組件內(nèi)部定義一個(gè)`show`方法,并在父組件調(diào)用該方法時(shí)傳入相應(yīng)的參數(shù)來(lái)控制子組件的顯示和隱藏,這種方法避免了使用props和emit,使子組件的顯示邏輯更加獨(dú)立和清晰

需求

父組件點(diǎn)擊新增或者修改時(shí)，子組件對(duì)話框顯示

子組件的標(biāo)題和確認(rèn)按鈕，根據(jù)父組件單擊按鈕來(lái)改變

做法

在子組件內(nèi)部做一個(gè)show方法（函數(shù)名隨意），在子組件內(nèi)部定義變量，父組件調(diào)用子組件的show方法，并傳入對(duì)應(yīng)的參數(shù)，子組件根據(jù)對(duì)應(yīng)的參數(shù)，給自己組件內(nèi)部的變量賦值

這樣做，而不用props，和emit傳值的方法，優(yōu)點(diǎn)是子組件的顯示隱藏都由子組件自己內(nèi)部變量控制，

如果使用props傳值，還要監(jiān)聽父組件傳過(guò)來(lái)的值

子組件show方法

    /**
     * 對(duì)話框展示,被父組件調(diào)用
     * @param visible 對(duì)話框是否可見
     * @param title 對(duì)話框的標(biāo)題
     * @param buttonText 對(duì)話框底部確認(rèn)按鈕的文本
     * @param type 父組件傳過(guò)來(lái)的參數(shù)，用來(lái)判斷是新增還是修改
     * @param projectName 項(xiàng)目名稱，修改需要用到
     * @param parentTableData 父組件的表格數(shù)據(jù)，來(lái)做表單驗(yàn)證，判斷是否重名
     */
    show(visible, title, buttonText, type, projectName, parentTableData) {
      this.visible = visible
      this.innerDialogData.title = title
      this.innerDialogData.buttonText = buttonText
      this.type = type
      this.formInDialog.projectName = projectName
      this.tableData = parentTableData
    },

父組件調(diào)用子組件的方法

<el-button type="primary" size="mini" @click="handleDialogShow('add')">新增</el-button>
<el-button type="warning" size="mini" @click="handleDialogShow('modify')">修改</el-button>    

   /**
     * 單擊新增或修改，dialog出現(xiàn)
     * @param value 傳過(guò)來(lái)的字符串，來(lái)判斷點(diǎn)的是哪個(gè)
     */
    handleDialogShow(value) {
      let visible, title, buttonText, type, projectName, parentTableData = this.parentTableData
      if (value === 'add') {
        visible = true
        title = '新建'
        buttonText = '新增'
        type = 'add'
        projectName = ''
      } else {
        if (this.multipleSelection.length !== 1 || this.multipleSelection.length === 0) {
          this.$message.warning('請(qǐng)選擇一個(gè)項(xiàng)目進(jìn)行修改')
        } else {
          visible = true
          title = '修改'
          buttonText = '保存'
          type = 'modify'
          projectName = this.multipleSelection[0].name
        }
      }
      this.$refs.addProjectDialog.show(visible, title, buttonText, type, projectName, parentTableData)
    },