乐趣区

关于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>
退出移动版