关于vue3:解决-TypeErrorparentComponentctxdeactivate-is-not-a-function-报错

报错详情:

runtime-core.esm-bundler.js:6055 Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
    at unmount (runtime-core.esm-bundler.js:6055:33)
    at patch (runtime-core.esm-bundler.js:5027:13)
    at sharedContext.activate (runtime-core.esm-bundler.js:2420:13)
    at processComponent (runtime-core.esm-bundler.js:5465:37)
    at patch (runtime-core.esm-bundler.js:5058:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5680:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5714:56)
    at updateComponent (runtime-core.esm-bundler.js:5539:26)
    at processComponent (runtime-core.esm-bundler.js:5472:13)

router-view官网示例:

<router-view v-slot="{ Component, route }">
      <!-- 留神  v-if="route.meta.isKeepAlive"放在keep-alive标签上不会失效 -->
      <keep-alive>
        <component :is="Component" v-if="route.meta.isKeepAlive"></component>
      </keep-alive>
      <component :is="Component" v-if="!route.meta.isKeepAlive"></component>
    </router-view>

咱们只有为component动静组件增加一个惟一属性key即可:

<router-view v-slot="{ Component, route }">
      <!-- 留神  v-if="route.meta.isKeepAlive"放在keep-alive标签上不会失效 -->
      <keep-alive>
        <component :is="Component" :key="route.name" v-if="route.meta.isKeepAlive"></component>
      </keep-alive>
      <component :is="Component" :key="route.name" v-if="!route.meta.isKeepAlive"></component>
    </router-view>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理