定义DynamicComponent.vue(父组件)，两个子组件:MyLeft.vue. MyRight.vue,当切换左右子组件时可以实现动态切换并只让子组件内容被缓存

在Vue.js中，你可以创建一个名为`DynamicComponent.vue`的父组件，它会根据条件动态地包含`MyLeft.vue`和`MyRight.vue`这两个子组件，并利用Vue的`keep-alive`特性来缓存已加载的内容。以下是一个简单的例子：

<template>
  <div id="dynamic-component">
    <button @click="toggleComponent">切换子组件</button>
    <transition name="fade" mode="out-in">
      <component :is="currentComponent" v-if="currentComponent">
        <!-- 使用v-bind:key属性防止更新替换导致缓存失效 -->
        <slot></slot>
      </component>
    </transition>
  </div>
</template>

<script>
import MyLeft from './MyLeft.vue';
import MyRight from './MyRight.vue';

export default {
  components: {
    MyLeft,
    MyRight
  },
  data() {
    return {
      currentComponent: 'myLeft', // 初始显示MyLeft组件
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'myLeft' ? 'myRight' : 'myLeft'; // 切换子组件名
    }
  }
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，`<transition>`标签包裹了需要动态切换的组件，`v-if`指令用于判断当前显示的是哪个组件。`toggleComponent`方法会在点击按钮时切换`currentComponent`的值，从而改变渲染的子组件。

为了保证子组件内容被缓存，你需要在每个子组件中添加`key`属性，例如：

// MyLeft.vue
<template>
  <div key="left-component">
    <!-- 子组件内容 -->
  </div>
</template>

// MyRight.vue
<template>
  <div key="right-component">
    <!-- 子组件内容 -->
  </div>
</template>

这样每次切换子组件时，Vue只会销毁对应的缓存实例，而不是整个父组件。如果你需要更精细的控制，可以在父组件中为每个子组件设置独立的缓存规则。