石家庄新闻头条新闻最新今天_建筑网片施工中的用途_app推广_长沙网站外包公司

        前言：此问题困扰我已久，每次都是本地运行没问题，但发布到线上之后就获取不到动态组件的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 = 0activeValue.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 = 0activeValue.value = stepList.value[activeId.value].value
}