码迷,mamicode.com
首页 > 其他好文 > 详细

(十一)动态组件 & 异步组件

时间:2020-06-05 11:36:22      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:href   直接   src   live   需要   png   打包   class   例子   

动态组件 & 异步组件

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

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技术图片

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

(十一)动态组件 & 异步组件

标签:href   直接   src   live   需要   png   打包   class   例子   

原文地址:https://www.cnblogs.com/tcz1018/p/13048705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!