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
这样就没问题了
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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; } }
本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载