zoukankan      html  css  js  c++  java
  • (十一)动态组件 & 异步组件

    动态组件 & 异步组件

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

    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在这里插入图片描述

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

  • 相关阅读:
    vue实战使用ajax请求后台数据(小白)
    jQuery实现tab栏切换效果
    jQuery下的ajax实例
    数据库之视图更新
    SQL Server 全文索引创建
    SQL Server 分区表
    数据快照 (Database Snapshot)
    FileStream
    ODBC,OLEDB,ADO,ADO.net,JDBC 理解
    拖延症?贪玩?来试试"百万金币时间管理法"
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13048705.html
Copyright © 2011-2022 走看看