vue中父组件控制子组件的显示隐藏详解

    /**
     * 对话框展示,被父组件调用
     * @param visible 对话框是否可见
     * @param title 对话框的标题
     * @param buttonText 对话框底部确认按钮的文本
     * @param type 父组件传过来的参数，用来判断是新增还是修改
     * @param projectName 项目名称，修改需要用到
     * @param parentTableData 父组件的表格数据，来做表单验证，判断是否重名
     */
    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
    },

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

   /**
     * 单击新增或修改，dialog出现
     * @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('请选择一个项目进行修改')
        } else {
          visible = true
          title = '修改'
          buttonText = '保存'
          type = 'modify'
          projectName = this.multipleSelection[0].name
        }
      }
      this.$refs.addProjectDialog.show(visible, title, buttonText, type, projectName, parentTableData)
    },