vue-cli-中的组件加载模式

动态组件

• 导入组件
• 注册组件
• 调用组件时通过component标签以及属性is来进行识别需要加载的组件是什么

案例—动态改变组件

  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<component :is="current"></component>
	<!-- 点击切换按钮判断，进行在ComA与ComB之间进行切换组件 -->
	<button @click="current =='ComA' ? current = 'ComB' : current = 'ComA'">切换</button>
  </div>

// 导入需要的组件
import ComA from '../components/ComA.vue'
import ComB from '../components/ConB.vue'

export default {
  name: 'Home',
  data() {return {
  // 声明一个点击时触发的那个组件
	  current : "ComA"
  }},
  components: {
    ComA,ComB,
	}
  },
}

异步加载组件

• 导入时不在是一般的导入
• 注册组件时：使用组件名字 : （）=> { return import(/* webpackChunkName : '组件的名字'*/ "在这里导入需要导入的组件路径")}
• /* webpackChunkName : '组件的名字'*/： webpack的 魔法注释 指定文件打包名称
• 异步加载的组件都会单独打一包

案例—点击加载异步的组件

<!-- 点击加载ComC组件 -->
<button @click="current = 'ComC'">切换组件C</button>

export default {
  name: 'Home',
  data() {return {
	  current : "ComA"
  }},
  components: {
	  // 异步加载组件ComC
	ComC : () => { 
		return import(/*  webpackChunkName: "ComC" */"../components/ComC.vue")
	}
  },
  
}