快捷導(dǎo)航

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

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

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

需求

父組件點擊新增或者修改時，子組件對話框顯示

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

做法

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

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

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

子組件show方法

    /**
     * 對話框展示,被父組件調(diào)用
     * @param visible 對話框是否可見
     * @param title 對話框的標(biāo)題
     * @param buttonText 對話框底部確認(rèn)按鈕的文本
     * @param type 父組件傳過來的參數(shù)，用來判斷是新增還是修改
     * @param projectName 項目名稱，修改需要用到
     * @param parentTableData 父組件的表格數(shù)據(jù)，來做表單驗證，判斷是否重名
     */
    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 傳過來的字符串，來判斷點的是哪個
     */
    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('請選擇一個項目進(jìn)行修改')
        } else {
          visible = true
          title = '修改'
          buttonText = '保存'
          type = 'modify'
          projectName = this.multipleSelection[0].name
        }
      }
      this.$refs.addProjectDialog.show(visible, title, buttonText, type, projectName, parentTableData)
    },