关于在vue3中的动态组件component标签上给ref属性动态赋值的问题

原创于 2025-03-05 16:34:49 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #vue

前言：此问题困扰我已久，每次都是本地运行没问题，但发布到线上之后就获取不到动态组件的ref对象。

之前的错误写法，本人前端经验不足，拿着老旧的思维逻辑拼凑，这种情况下在本地运行环境是可以实现点击下一步进行切换的，但打包压缩发布到线上之后，就失效了

<keep-alive>
      <component :is="activeValue" :ref="stepList[activeId].refName"  />
</keep-alive>    


 <el-button @click="handleCreatNext()" type="primary">下一步</el-button>

const Component1Ref = ref()
const Component2Ref = ref()

const stepList = ref([
  {
    id: 0,
    label: '子组件1',
    value: shallowRef(Component1),
    refName: 'Component1Ref'
  },
  {
    id: 1,
    label: '子组件2',
    value: shallowRef(Component2),
    refName: 'Component2Ref'
  }])

const handleCreatNext = async () => {
if (activeId.value == 0) {
    //处理步骤1的逻辑
    await Component1Ref.value.formRef.validate()
} else if (activeId.value == 1) {
    // 处理步骤2的逻辑
}
    if (activeId.value++ > 3) activeId.value = 0
  activeValue.value = stepList.value[activeId.value].value
}

正确做法请参考：

<keep-alive>
      <component :is="activeValue" :ref="(el) => currentComponent = el"  />
</keep-alive>    


 <el-button @click="handleCreatNext()" type="primary">下一步</el-button>

const currentComponent = ref(Component1);

const stepList = ref([
  {
    id: 0,
    label: '子组件1',
    value: shallowRef(Component1),
    refName: 'Component1Ref'
  },
  {
    id: 1,
    label: '子组件2',
    value: shallowRef(Component2),
    refName: 'Component2Ref'
  }])

const handleCreatNext = async () => {
 await nextTick();
if (activeId.value == 0) {
    //处理步骤1的逻辑
    await currentComponent.value.formRef.validate()
} else if (activeId.value == 1) {
    // 处理步骤2的逻辑
}
    if (activeId.value++ > 3) activeId.value = 0
  activeValue.value = stepList.value[activeId.value].value
}