vue动态组件

如果我们不想让也面初始化的时候就加载所有的组件，就会用到动态组件
常用的场景是多tab的页面，每一个tab是一个组件这种

• 示例1：这是没有使用动态组件的时候

<template>
  <div>
    <button @click="check">{{ !show ? "展示组件" : "隐藏组件" }}</button>
    <ccc v-if="show"></ccc>
  </div>
</template>

<script>
import ccc from '../components/ccc'
export default {
  components: { ccc },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    check() {
      this.show = !this.show;
    },
  },
};
</script>

打开控制台，切换到到network面板，刷新页面，会看到页面初始化的时候就已经加载了这个也买你所有的组件(只有一个app.js),点击展示组件按钮的时候，是不会再请求资源的

• 示例2：这是使用了动态组件的时候

<template>
  <div>
    <button @click="check">{{ !show ? "展示组件" : "隐藏组件" }}</button>
    <ccc v-if="show"></ccc>
  </div>
</template>

<script>

export default {
  components: { 
    ccc: () => { import("../components/ccc") }
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    check() {
      this.show = !this.show;
    },
  },
};
</script>

打开控制台，切换到到network面板点击展示组件按钮的时候，会看到请求了xx.js资源,我们可以给这个xx命名，方式是：ccc: () => { import(/* webpackChunkName: 'ccc' */ "../components/ccc") }
这样xx.js就变成了ccc.js