vue中启用keep-alive后组件的ref无法读取问题.

Z时代
2024-03-10
分类：IT

页面中导入一个头像上传组件，组件中使用了ref,调试均已正常，启用keep-alive后，组件报错，主要是this.$refs.files为null，直接重新刷新页面（刷新keep-alive不启用的）组件是工作正常的。
以下是keep-alive配置

<template>
  <router-view v-slot="{ Component }" class="routerView">
    <transition name="fade" mode="out-in">
      <keep-alive :include="$store.state.aliveList" :max="20">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view></template>

vuex是用axios封装后，每次从服务器拉取数据后，将当前页面加入到aliveList列表中，实现缓存。
当缓存不生效的时候，组件是工作正常的，当从服务器拉取数据后，页面被设置到aliveList中后，组件工作不正常。

也尝试过将页面直接exclude排队缓存列表，也是一直工作正常，可以确定为keep-alive下ref无法工作。
view视图下引入的子组件内容大概如下：

<template>
    <div>
        <button ref="testbtn" @click="textclick()">ttt</button>
    </div>
</template>
<script>
export default {
    methods:{
        textclick(){
            console.log(this.$refs.testbtn);
        }
    }
}</script>

当keep-alive不启用时，ref可以正常打印出对象，当keep-alive启用时，打印ref对象为null

求大神指导。