vue 切换组件保持之前状态keep-alive、Component动态组件、is属性解决标签内部标签限制

淡淡的烟草味﹌ 2021-07-24 11:41 533阅读 0赞

1、切换保持组件当前状态
    
    		<component :is='变量'></component>
    
    	切换组件:
    		is的值是一个字符串,它既可以是HTML标签名称也可以是组件名称。
    		(1)变量的值为哪个组件名即代表哪个组件
    		(2)this.$options.components['组件名']获取
    			
    			<component :is="componentId"></component>
    			
    			
    			<component :is="$options.components.child"></component>
    			
    			
    			<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>
    			
    			
    			<component :is="href ? 'a' : 'span'"></component>
    
    	
    	保持当前组件状态(即切换组件,再切换回去时,还是上次操作组件的状态)
    		
    		<keep-alive>
    			<component :is='变量'></component>
    		</keep-alive>
    
    		(1)保持这些组件的状态，以避免反复重渲染导致的性能问题组,件实例能够被在它们第一次被创建的时候缓存下来
    				
    		  <keep-alive
    			include:'组件的name,非路由中的name'  	字符串/正则要缓存的组件/数组
    				如:
    					include='组件1,组件2'
    					:include='/组件1|组件2/'
    					:include="['组件1','组件2']"
    			exclude:'name1,name2'		 不缓存的组件,字符串/正则要缓存的组件/数组
    			不写参数默认全部缓存
    			max:'最多可以缓存多少组件实例'	一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
    		  >
    		    <router-view></router-view>
    		  </keep-alive>
    		  
    		 指定缓存方式二:
    		  <keep-alive>
    		    <router-view v-if='$route.meta.x'></router-view>
    		  </keep-alive>
    		  	<router-view v-if='!$route.meta.x'></router-view>
    
    2、is解决标签限制
    	诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部
    		<table>
    		  <blog-post-row></blog-post-row>	报错
    		</table>
    		
    	解决方案:
    		<table>
    		  <tr is="blog-post-row"></tr>
    		</table>
    		需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
    			字符串 (例如：template: '...')
    			单文件组件 (.vue)
    			<script type="text/x-template">

代码示例:  
主入口文件

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <Vuedemo />
        <Vue1/>
    
    
        <keep-alive>
          <component :is='currentComponent'></component>
        </keep-alive> 
    
        <button @click='change'>切换组件</button>
        
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld'
    import Vuedemo from './components/Vuedemo'
    import Vue1 from './components/Vuee'
    import A from './components/A'
    import B from './components/B'
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          currentComponent:A,
          flag:false
        }
      },
      methods:{ 
        change()
        { 
          this.flag=!this.flag
    
          if(this.flag)
          { 
            this.currentComponent=A;
            console.log('a')
          }else{ 
            this.currentComponent=B;
             console.log('b')
          }
        }
    
      },
      components: { 
        HelloWorld,
        Vuedemo,
        Vue1,
        A,
        B
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

组件A:

<template>
    	<div>
    		组件A:{ { msg}}
    		<button @click='change'>改变msg</button>
    	</div>
    </template>
    
    <script>
    export default{ 
    	name:'A',
    	data()
    	{ 
    		return{ 
    			msg:'aa'
    		}
    	},
    	methods:{ 
    		change()
    		{ 
    			this.msg='aaa'
    		}
    	}
    }
    </script>
    
    <style lang='css'>
    <style>

组件B：

<template>
    	<div>
    		组件B
    	</div>
    </template>
    
    <script>
    export default{ 
    	name:'B',
    	data()
    	{ 
    		return{ 
    
    		}
    	}
    }
    </script>
    
    <style lang='css'>
    <style>