vue 动态替换父组件

陆康永2024-09-01 16:57

替换父组件？？

什么鬼？？？

这个场景的确很少见！！不过我们要说的的确是要替换父组件！！！！！！

就是子组件内容不变但是父组件变化

我们要把父组件替换成其他的，虽然这种场景不大可能遇到，但是爱转牛角尖的我还是决定试一试！！

弊端

替换父组件回导致子组件dom回流（dom完全重新渲染，解析dom，解析css，组合dom和css规则），即使给父节点添加了keepalive也无法避免，只是保留虚拟dom，减少了vue实例的重新生成

动态组件

动态组件，我们首先想到的是component，代码如此

复制代码

<component is="xx">
  <子组件/>
</component>

这样是没问题的。

父组件

那父组件都得接受一个默认插槽，大概就得长这样

复制代码

//xx.vue

<template>
    <div>

        <h1>父组件1</h1>

        <slot/>
    <div>
</tempate>

基本思路有了

Suspense

那如果动态组件需要显示过度效果呢

复制代码

    <Suspense>
          <!-- 主要内容 -->
          <component :is="Component">
            <子组件/>

        </component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>

完美基本长这个样子

问题

切换父组时候，子组件必定会被卸载的!!

用keep-alive包裹一下component即可

demo

在线demo：InsCode - 让你的灵感立刻落地

这个demo里面你回发现切换子组件时候，子组件一的cout值回保持不变，但是切换父组件时候子组件的count值不会保留，那是因为这个子组件的父组件被销毁了导致子组件的缓存也会被销毁

如果给父组件的component也加上keepalive就没有这个问题了