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

1.需求

        1.1  父组件点击新增或者修改时，子组件对话框显示

        1.2   子组件的标题和确认按钮，根据父组件单击按钮来改变

 2. 做法

        2.1 在子组件内部做一个show方法（函数名随意），在子组件内部定义变量，父组件调用子组件的show方法，并传入对应的参数，子组件根据对应的参数，给自己组件内部的变量赋值

        这样做，而不用props，和emit传值的方法，优点是子组件的显示隐藏都由子组件自己内部变量控制，

        如果使用props传值，还要监听父组件传过来的值

子组件show方法

    /**
     * 对话框展示,被父组件调用
     * @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)
    },