vue动态插槽和动态组件

动态插槽和动态组件是Vue中非常重要的概念，它们可以让我们在开发过程中更加灵活地处理组件的渲染和数据传递。

动态插槽：
动态插槽是指在组件中使用具名插槽(slot)时，可以动态地绑定插槽名。这样可以让组件更加灵活，可以根据不同的数据动态地渲染不同的内容。示例代码如下：

<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotName: 'default'
    }
  },
  methods: {
    changeSlotName() {
      this.slotName = 'newSlotName'
    }
  }
}
</script>

动态组件：
动态组件是指在组件中使用<component>标签时，可以动态地绑定组件名。这样可以让组件更加灵活，可以根据不同的数据动态地渲染不同的组件。示例代码如下：

<template>
  <div>
    <component :is="componentName"></component>
    <button @click="changeComponentName">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      componentName: 'ComponentA'
    }
  },
  methods: {
    changeComponentName() {
      this.componentName = this.componentName === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>