在Vue开发中如何共用一个组件模块

在Vue开发中如何共用一个组件模块

开发中经常会遇到这种情况，可能添加和编辑只有一丢丢区别，这种情况下封装多个组件显然不明智。就可以使用下面介绍的思路啦~

步骤如下

1.可以先定义一个子组件

    <add_dept
      ref="edpt" //通过这个ref属性调用子组件里methods方法
      :is-edit="isEdit" //自定义一个属性控制弹框的显示or隐藏
      :cur-node-id="curNodeId"
      :is-show.sync="isShow"
      @updata="getDepartment"
    />

2.在点击确认时判断

                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>

点击确认后根据当前元素的command的值判断是什么功能
根据不能的command值更改定义后的isShow的值，实现标题的变更
ture：添加
false：编辑

    hContent(type, id) {
      // console.log(type, id)
      this.curNodeId = id
      if (type === 'add') {
        this.isShow = true
        // add标题为添加
        this.isEdit = false
      } else if (type === 'edit') {
        this.isShow = true
        // edit标题为编辑
        this.isEdit = true
        // 1.通过判断type值，开启编辑弹框
        // 2.给子组件添加ref属性，通过refs调用子组件里面的methods方法（和添加共用一个组件）
        // 注意，由于子组件需要使用的id，传参是异步方法，要使用nexttick方法保证调用的时候能获取到参数
        this.$nextTick(() => {
          this.$refs.edpt.getDetail()
        })
      } else if (type === 'del') {
        this.$confirm('你确认要删除吗？')
          .then(() => {
            // 确认删除调用删除方法
            this.doDel(id)
          })
          .catch(() => {})
      }
    }

这样一份表单两个功能使用的静态模块差不多就完成啦~

接下来就是子组件的里面的步骤

    async getDetail() {
      console.log('调用成功')
      // 编辑：3.封装接口并调用
      const res = await getDepartmentDetail(this.curNodeId)
      // console.log('调用id', res)
      // 4.数据回显，赋值给表单数据
      this.formData = res.data
    },

首先编辑需要数据回显，先实现数据回显

然后添加完后点击确认后，判断一下点击的是编辑or添加

    doAdd() {
      this.$refs.refFrom.validate((valid) => {
        if (valid) {
          this.isEdit ? this.doEdit() : this.hAdd()
        }
      })
    },

编辑or添加的回调函数里实现各自的需求就可以啦~

有一点注意的哈~

        this.$nextTick(() => {
          this.$refs.edpt.getDetail()
        })

父组件通过给子组件绑定的ref属性调用子组件的回调函数时，需要用到$nextTick方法
原理：因为Vue中父子传值是异步操作的，所以需要使用nexttick方法保证调用的时候能获取到参数 !
在这里插入图片描述