vue动态组件

1. 什么是动态组件？

什么是组件？

1. 组件是vue实例
2. 组件是可复用的vue实例
3. 组件有自己的名字
4. 组件分为全局组件和局部组件

什么是动态组件？

<component v-bind:is="component-name"></component>

动态组件指根据给属性 is绑定值的不同来渲染不同名称的组件。当前例子里，渲染的是名为 component-name的组件

2. 为什么使用动态组件？

1. 当你不清楚要渲染多少组件/渲染什么组件时。即当组件的名称是被循环出来时。如sass系统中的自定义字段功能。我页面上显示什么表单，取决于用户配置了什么。那么我可以先把自定义字段的表单按种类写成一个个组件。如输入框组件、下拉框组件、地区选择组件等。当需要在页面渲染时，我直接将这些组件的名称及基本配置（如placeholder，label名称、是否必填等）组成一个数组，使用component循环出来，如：

<component 
  v-for="field in fields" 
  v-bind:is="field.name"
  :placeholder="field.placeholder"
  :label="field.label"
  :required="field.isRequired">
</component>

data(){
    return {
        fields: [
            {
                name: 'input',
                placeholder: '请输入姓名',
                label: '姓名',
                isRequired: true
            }
        ]
    }
}

3. 如何使用动态组件？

1. 将需要切换显示的组件在父组件中进行声明：

import ComponentA from './component-a.vue'
import ComponentB from './component-b.vue'
export {
    name: 'component',
    components: {ComponentA, ComponentB}
}

2. 使用is进行切换：

<template v-bind:is="name"></template>
<button @click="switch">切换组件</button>
...
data(){
    return {
        name: 'ComponentA'
    }
}
switch(){
    if (this.name === 'ComponentA') {
        this.name = 'ComponentB'
    } else {
        this.name = 'ComponentA'
    }
}

4. 动态组件相关

1. Keep-alive
   默认每次切换会重新创建一个新的实例，若希望实例在第一次被创建时被缓存下来，可以使用 keep-alive :

<keep-alive>
    <template v-bind:is="name"></template>
</keep-alive>