vue中component动态组件和keep-alive组件include和exclude对名称的问题

1. vue中component动态组件

• 定义：动态组件就是可以动态变化的组件，与动态样式类似，可以按照用户操作动态的展示不同的组件；
• 根据组件is属性 的值，来决定索要渲染的组件；
• is属性可以是字符串组件名或者是组件名对象；
• 代码示例<component :is="XXX" />；
• 应用场景：属于底层开发必备， vue-router 底层就依赖于它，进行动态的内容展示；

1. 代码示例

• 创建三个子组件AComp、BComp、CComp，用作被切换的组件；

<template>
  <div>A组件</div>
</template>

<template>
  <div>B组件</div>
</template>

<template>
  <div>C组件</div>
</template>

• 在父组件APP中使用component动态组件，动态的展示三个组件；
• 其中dynamicName是个变量，保存在APP的data中；
• 在APP的data中设置compsName为['AComp','BComp','CComp']数组；

<component :is="dynamicName" />

1.1 名字切换的实现方式

• 引入一个select组件，并绑定变量dynamicName，切换select组件的选项即可实现组件动态切换；

名字切换<select v-model="dynamicName" name="" id="">
    <option v-for="name in compsName" :value="name">{{ name }}</option>
</select>

• 实现的效果：

1.2 组件切换的实现方式

• 引入一个select组件，并绑定change事件toggleName，切换select组件的选项即可实现组件动态切换；

组件切换<select @change="toggleName" name="" id="">
    <option v-for="name in compsName" :value="name">{{ name }}</option>
</select>

• toggleName函数：

toggleName(e) {
  switch (e.target.value) {
    case 'AComp':
      return this.dynamicName = AComp;
    case 'BComp':
      return this.dynamicName = {
        name: 'BComp',
        ...BComp,
      }
    case 'CComp':
      return this.dynamicName = {
        name: 'CComp',
        render: CComp.render
      }
  }
}

• 实现的效果：

2，keep-alive组件include和exclude对名称的问题

• include：keep-alive组件所包裹的需要缓存的组件name属性的值，要跟include属性值一致；
• exclude：keep-alive组件所包裹的不需要缓存的组件name属性的值，要跟exclude属性值一致；
• 注意：如果组件没有名称name, 就以components中名称决定, 再没有的话就跟文件名保持一致；
• 如果组件有名称, 就以组件名称决定（最好给组件指定好name属性）；