Vue.js 组件引用和转换不能一起工作答案

【问题标题】：Vue.js Component refs and transitions not woking togetherVue.js 组件引用和转换不能一起工作
【发布时间】：2020-10-25 13:13:09
【问题描述】：

模板：

<transition name="slide-fade" mode="out-in">
            <router-view ref="route" @resetSteps="handleResetSteps" @nextStep="handleNextStep"></router-view>
</transition>

代码

computed: {
            buttonOptions() {
                if (!this.isMounted || !this.$refs.route) {
                    return {};
                }
                return {
                    disabled: this.$refs.route.buttonOptions.disabled || this.$refs.route.buttonOptions.loading,
                    loading: this.$refs.route.buttonOptions.loading,
                    text: this.$refs.route.buttonOptions.text,
                    hidden: this.$refs.route.buttonOptions.hidden,
                };
            }
        },

methods:{
async handleActiveStep(activeStep) {
                this.isMounted = false;
                await this.$router.push({name: activeStep});
                this.isMounted = true;
            },
}

由于某种原因，当我将转换应用于上述模板时，计算属性对引用组件的访问不起作用。

我的意思是，我在当前 ref 上得到“未定义”，尽管我确保等到路由器处理“推送”（这就是我使用“isMounted”属性的原因）

如果我删除过渡标签，一切都会按预期进行

任何想法为什么..？

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

$refs 仅在组件被渲染后才被填充，并且它们不是响应式的。它仅作为直接子操作的逃生舱口 - 您应该避免从模板或计算属性中访问 $refs。 Vue.js documentation

【讨论】：