动态组件 & 异步组件

Posted 2020-12-08 tcz1018

动态组件 & 异步组件

切换组件保持组件的原状态

1.使用 is 进行组件的切换显示

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

这样是重新创建了组件 如果要保持组件的状态，比如打开的菜单栏还是保持展开的 ，就可以这样

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

异步组件

1.定义
就是组件在定义的时候什么都不做，只是在需要组件的时候进行加载，第一次加载完成后，进行缓存，下次访问直接用
2.实现按需加载
Vue实现按需加载，官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的组件，在打包的时候，会打包成单独的js文件存储在static/js文件夹里面，在调用时使用ajax请求回来插入到html中。
简单例子实现：

<template>
	<button @click="show">展示加载子组件</button>
	<div v-if="ifshow">
		<p>展示组件</p>
		 <child></child>
	</div>
</template>
<script>
export default {
 components: {
   	‘child‘: function(resolve) { require([‘./components/child.vue‘], resolve);
  }
  data(){
        return {
         ifshow:false
        }
  },
  methods: {
        showchild:function(){
           this.show=true;
         }
  },

</script>

child.vue是异步组件，所以会先ajax获取组件然后渲染
参考其他人的 https://blog.csdn.net/weixin_36094484/article/details/74555017

具体使用 感觉还待考证 这里只是明白相应的作用，明确简单的案例使用，在项目使用的是时候还得继续补充其相关的作用