vue 切换组件保持之前状态keep-alive、Component动态组件、is属性解决标签内部标签限制
切换保持组件当前状态<component :is='变量'></component>切换组件:(1)变量的值即为组件名,使用时需在data属性中声明,且不加/(2)变量的值为哪个组件名即代表哪个组件保持当前组件状态(即切换组件,再切换回去时,还是上次操作组件的状态)<keep-alive><compo...
·
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>
更多推荐
已为社区贡献20条内容
所有评论(0)