Vue3 一个页面如何区分两个getCurrentInstance()实例？

Question

使用诺依框架生成了几个页面，将其放入 ElementUI PLus 的 Tabs 标签页 中，这样就会出现多个
const { proxy } = getCurrentInstance() 实例。

如何区分呢？

Answer 1

将tab页签内的组件分离出来.不要把组件放到tab内。然后通过改变动态组件得is属性，来保证有且仅有一个组件渲染在当前页面，则就可以保证getCurrentInstance()获取到得即是当前激活组件实例。

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
</el-tabs>
<component :is="currentComponent">component>

handleClick(tab) {
    currentComponent = tab
}

这样的话,页面上只能存在一个组件. 因此getCurrentInstance()只能获取到一个