1. 动态组件
动态组件:顾名思义就是组件会动态的切换显示
需求: 需要根据不同的状态显示的不同的组件.
案例:示例代码如下:
image
我们能想到的就是使用v-if,或者v-show切换组件的显示
1.1. 使用v-if 或v-show指令切换组件
<style>
.bottom{
display:flex;
position: fixed;
bottom:0;
left:0;
right:0;
height:50px;
background: #fff;
border-top:1px solid #ccc;
}
button{
flex:1;
border:0;
outline:none;
background: #fff;
}
.active{
background: #ccc;
}
</style>
<div id="app">
<!-- 组件的切换 -->
<Home v-if="com=='Home'"></Home>
<Articl v-if="com=='Articl'"></Articl>
<About v-if="com=='About'"></About>
<!-- 切换组件的按钮 -->
<div class="bottom">
<button
v-for="value in components"
@click="change(value)"
:class="{active:com== value}"
>
{{value}}
</button>
</div>
</div>
<script>
// 首页组件
let Home = {
template:`
<div>
<h2>Home组件</h2>
用户名: <input type="text"/>
</div>
`
}
// 文章组件
// 注意不能使用article 因为html有原生的article标签
let Articl = {
template:`
<div>
<h2>Article组件</h2>
</div>
`
}
// 关于作者组件
let About = {
template:`
<div>
<h2>About组件</h2>
</div>
`
}
// vue 实例
var vm = new Vue({
el: '#app',
data: {
com:"Home",
components:["Home","Articl","About"]
},
methods:{
change(value){
this.com = value;
}
},
components: {
Home,Articl,About
},
});
</script>
其实这样的操作不是特别友好, 如果有几十个组件这样切换就得每一个组件都要通过v-if指令处理
因此vue提供了动态组件帮我们处理同样的事情
1.2. 动态组件的基本用法
动态组件在不同组件之间进行动态切换是非常有用的.
通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
使用动态组件重新处理上面的示例
将上面示例中的如下代码
<!-- 组件的切换 -->
<Home v-if="com=='Home'"></Home>
<Articl v-if="com=='Articl'"></Articl>
<About v-if="com=='About'"></About>
替换为
<component :is="com"></component>
这样依然可以实现之前的效果.
此时is属性的值是通过v-bind指令动态绑定到data属性中的数据, 此时编译后is的值是哪一个组件的名字就显示哪一个组件.
2. 动态组件上使用 keep-alive
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
一般用于组件的切换,否则组件在切换时,会频繁的创建和删除组件,不太好,
这样也没法在组件切换是保存之前状态
2.1 未使用keep-alive
在未使用keep-alive保存组件状态时,每次的最切换都是在创建一个新组件,并且删除一个旧组件
每个组件也都有自己的生命周期,我们把生命周期 函数添加上看看是不是每次切换组件都是在重新创建和删除组件
示例代码:
<script>
// 首页组件
let Home = {
template:`
<div>
<h2>Home组件</h2>
用户名: <input type="text"/>
</div>
`,
created(){
alert("Home组件实例化完毕")
},
beforeDestroy(){
alert("Home组件将被删除")
}
}
// 文章组件
// 注意不能使用article 因为html有原生的article标签
let Articl = {
template:`
<div>
<h2>Article组件</h2>
</div>
`,
created(){
alert("Article实例化完毕")
},
beforeDestroy(){
alert("Article组件将被删除")
}
}
// 关于作者组件
let About = {
template:`
<div>
<h2>About组件</h2>
</div>
`,
created(){
alert("About实例化完毕")
},
beforeDestroy(){
alert("About组件将被删除")
}
}
// vue 实例
var vm = new Vue({
el: '#app',
data: {
com:"Home",
components:["Home","Articl","About"]
},
methods:{
change(value){
this.com = value;
}
},
components: {
Home,Articl,About
},
});
</script>
看视图:
image
因为每次组件切换都是新创建的组件,都是全新的,那么在组件切换前的组件状态将没发保存
2.2 使用keep-alive 保存状态
但是在这个案例中，我们更希望那些标签的Home组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
<!-- 缓存组件 -->
<keep-alive>
<component :is="com"></component>
</keep-alive>
修改后的结果
image
此时组件并不会被销毁,而是一直缓存者,因为keep-alive的原因
网友评论