vue动态组件和异步组件

动态组件和异步组件其实在实际开发中是经常需要用到的。之前自己的做法总是根据选中的状态去判断该显示的内容，一直忽略了vue里面本身就有的这么个功能

基本使用：

<template>
<div>
    <el-button-group>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>{{btn.name}}
        </el-button>
    </el-button-group>
    <div>
        <component :is='currentCom'></component>
    </div>
</div>
</template>
<script>
import Childs1 from './Childs1'
import Childs2 from './Childs2'
import Childs3 from './Childs3'
import Childs4 from './Childs4'

export default {
    name:'Parent',
    components:{
        Childs1,
        Childs2,
        Childs3,
        Childs4
    },
   data() {
    return {
        btnGroup: [
            {name: 'Childs1', disabled: true},
            {name: 'Childs2', disabled: false},
            {name: 'Childs3', disabled: false},
            {name: 'Childs4', disabled: false},
        ],
        currentCom:'Childs1'
        
    }
  },
  methods:  {
      change(index){

          let pre = Number(this.currentCom[this.currentCom.length -1]);
          this.btnGroup[pre -1].disabled = false;
          this.btnGroup[index].disabled = true;
          this.currentCom = 'Childs' + (index + 1);
          
      }
  }
}
</script>
<style scoped>
.active{
    background-color: red;
}
</style>

is的值可以食一个已经注册的组件的名字或者一个组件的选择对象

如果我们需要频繁的切换页面，可以使用keep-alive缓存当前组件的状态

<template>
<div>
    <el-button-group class='btn-group'>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>
        {{btn.name}}
        </el-button>
    </el-button-group>
    <div style='padding-top:100px;'>
    <keep-alive>
            <component :is='currentCom'></component>
    </keep-alive>
    </div>
</div>
</template>
<style scoped>
.btn-group{
    position:fixed;
}
.active{
    background-color: red;
}
</style>

提示：因为缓存的组件只需要建立一次，所以如果我们要在每次进入组件的钩子函数里面做相应的操作的时候，会出现问题，必须明确使用的场景

 

异步组件

异步组件存在的异议，在于加载一个体量很大的页面时，如果我们不设置加载的优先级的话，那么页面在加载视屏等信息的时候会非常占用时间，然后阻塞后面主要信息的加载。官网上面是这么说明的

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

也可以在工厂函数中返回一个 Promise

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

这里的异步组件工厂函数也可以返回一个如下格式的对象：（2.3.0新增）

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})