异步组件webpack-(11)动态组件&异步组件

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

动态组件&异步组件切换组件保持组件原有状态

1.用途是切换组件的显示

这将重新创建该组件。 如果想保持组件的状态，例如打开的菜单栏保持展开状态，可以这样做

异步组件

一、定义

也就是说，组件在定义时不执行任何操作。 它仅在需要时加载组件。 第一次加载完成后，会被缓存。 直接使用最后一次访问。

2.实现按需加载

Vue实现按需加载异步组件webpack，官方推荐使用代码分割功能结合webpack。 打包定义为异步加载的组件时，会打包成单独的js文件，存放在static/js文件夹中。 调用时异步组件webpack，将使用 ajax 请求将它们插入回 html 中。

简单示例实现：

	展示加载子组件
	

		
展示组件
		 
	


export default {
 components: {
   	'child': function(resolve) { require(['./components/child.vue'], resolve);
  }
  data(){
        return {
         ifshow:false
        }
  },
  methods: {
        showchild:function(){
           this.show=true;
         }
  },

child.vue是一个异步组件，所以ajax获取到组件后才会渲染。

参考别人的

具体用途还有待验证。 这里我们只是了解相应的功能并理清简单的案例用法。 当项目使用的时候，我们要不断的添加它的相关功能。