vue3 获取组件实例 $ref方法踩坑 getCurrentInstance()

ps：

我使用的是element-plus框架，有一个需求是级联选择器，选择后需要获取最后的id和label一起传递给后端。

获取id比较简单在change事件中使用value.pop()就可以获得

但是获取label的时候有点痛苦，因为vue3获取实例不像vue2可以直接this.$ref获取

参考:https://blog.csdn.net/F_fengzilin/article/details/118789302

https://blog.csdn.net/m0_49016709/article/details/117077579

 

后来找到了getCurrentInstance方法

然后我直接使用

currentInstance.ctx.$refs['demandUnitNameUP'].getCheckedNodes()[0].data.label

发现是可以取到值的 发布到测试环境以后发现一直报错 后来查看资料发现currentInstance.ctx只在本地有效

然后更改方式为

const { proxy } = getCurrentInstance();

proxy.$refs['demandUnitNameUP'].getCheckedNodes()[0].data.label

这样就没问题了

 

               <el-cascader
                  ref="demandUnitNameUP"
                  v-model="form.demandUnitId"
                  :options="demandUnitOptions"
                  :props="propss"
                  clearable
                  @change="handleChange"
                />

const { proxy } = getCurrentInstance();


//获取需求单位信息
function getDeptMsg() {
  getNewModelDept().then((res) => {
    data.demandUnitOptions = res.data;
    testarr(data.demandUnitOptions);
  });
}

//递归遍历返回数据适配options值
function testarr(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].childList.length > 0) {
      arr[i].label = arr[i].name;
      arr[i].value = arr[i].id;
      arr[i].children = arr[i].childList;
      testarr(arr[i].childList);
    }
    arr[i].label = arr[i].name;
    arr[i].value = arr[i].id;
    arr[i].children = arr[i].childList;
  }
}

//级联选择器选择
function handleChange(value) {
  // console.log(currentInstance.ctx.$refs['demandUnitNameUP'].getCheckedNodes()[0].data.label)
  if (value) { 
    data.form.demandUnitId = value.pop();
    // data.form.demandUnitName = currentInstance.ctx.$refs['demandUnitNameUP'].getCheckedNodes()[0].data.label
    data.form.demandUnitName = proxy.$refs['demandUnitNameUP'].getCheckedNodes()[0].data.label
  } else {
    data.form.demandUnitId = null;
  }
}