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

1、动态切换组件

		<component :is='变量'></component>

	切换组件:
		is的值是一个字符串,它既可以是HTML标签名称也可以是组件名称。
		(1)变量的值为哪个组件名即代表哪个组件,可以是keep-alive这样的内置组件
		(2)this.$options.components['组件名']获取
			<!--  动态组件由 vm 实例的 `componentId` property 控制 -->
			<component :is="componentId"></component>
			
			<!-- 也能够渲染注册过的组件或 prop 传入的组件-->
			<component :is="$options.components.child"></component>
			
			<!-- 可以通过字符串引用组件 -->
			<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>
			
			<!-- 可以用来渲染原生 HTML 元素 -->
			<component :is="href ? 'a' : 'span'"></component>
			
			如果你传递组件本身到is而不是其名字,则不需要注册。
	
	保持当前组件状态(即切换组件,再切换回去时,还是上次操作组件的状态)
		
		<keep-alive>
			<component :is='变量'></component>
		</keep-alive>
		 用在其一个直属的子组件被切换的情形,如果你在其中有 v-for 则不会工作,<keep-alive>要求同时只有一个子元素被渲染
		 
		(1)保持这些组件的状态，以避免反复重渲染导致的性能问题组,件实例能够被在它们第一次被创建的时候缓存下来
				
		  <keep-alive
			include="string|RegExp|Array"  	字符串/正则要缓存的组件/数组
				优先匹配自身的name选项,否则匹配局部注册名称(父组件中components注册的值)
				如:
					include="a,b"
					:include="/a|b/"
					:include="['a', 'b']"
					
			exclude="string|RegExp|Array"	 不缓存的组件,字符串/正则要缓存的组件/数组
			不写参数默认全部缓存
			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="vue: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>