vue动态组件详解
1、 什么是动态组件动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。最常见的就是:tab的切换功能。在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性,二是使用 v-if 。方式一:<template><div class="hello"&g
·
1、 什么是动态组件
动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。
最常见的就是:tab的切换功能。
在vue要实现这个功能通常用两种方式。一是使用<component>
元素的 is 的特性,二是使用 v-if 。
方式一:
<template>
<div class="hello">
<h3>使用component 的 is特性</h3>
<ul>
<li
v-for="(item,index) in tabList"
:key="index"
style="cursor:pointer"
@click="changeView(index)">
{{item}}</li>
</ul>
<component :is="currentView"></component>
</div>
</template>
<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
name: "HelloWorld",
components: {
shouji,
pc,
shuma,
},
data() {
return {
index: 0,
arr: ["shuma", "shouji", "pc"],
tabList: ["数码", "手机", "电脑"],
};
},
computed: {
currentView() {
return this.arr[this.index];
}
},
methods: {
changeView(index) {
this.index = index;
}
},
};
</script>
方式二
<template>
<div class="hello">
<h3>使用v-if实现</h3>
<ul>
<li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="change(index)">{{item}}</li>
</ul>
<div>
<shuma v-if="index===0"></shuma>
<shouji v-else-if="index===1"></shouji>
<pc v-else></pc>
</div>
</div>
</template>
<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
name: "HelloWorld",
components: {
shouji,
pc,
shuma,
},
data() {
return {
index: 0,
keppIndex:0,
arr: ["shuma", "shouji", "pc"],
tabList: ["数码", "手机", "电脑"],
};
},
computed: {
},
methods: {
change(index) {
this.index = index;
}
},
};
</script>
缓存
上述讲到的方法虽然能够实现了动态组件的切换,但是每次切换都会把上一个组件销毁,然后渲染下一个组件,对于多次切换而言,显然每次的销毁和重新渲染,很大消耗了我们的性能。所以我们可以通过keep-alive对组件进行缓存,对于不显示的组件不是去销毁他,而是使他处理不激活的状态,当需要显示时再去激活。
<template>
<div class="hello">
<h3>使用component 的 is特性 有缓存的组件</h3>
<ul>
<li
v-for="(item,index) in tabList"
:key="index"
style="cursor:pointer"
@click="changeView(index)">
{{item}}</li>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</ul>
</div>
</template>
<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
name: "HelloWorld",
components: {
shouji,
pc,
shuma,
},
data() {
return {
index: 0,
arr: ["shuma", "shouji", "pc"],
tabList: ["数码", "手机", "电脑"],
};
},
computed: {
currentView() {
return this.arr[this.index];
}
},
methods: {
changeView(index) {
this.index = index;
}
},
};
</script>
和keep-alive 相关的两个生命周期
activated() {
console.log("shouji 手机页面被添加");// 被缓存的组件激活时触发
},
deactivated() {
console.log("shouji 手机页面被移除"); // 被切换到其他组件时触发
}
keep-alive的两个属性
include和exclude
include表示只能允许匹配到的组件生效
exclude则相反,除了匹配到的组件之外有效
使用方法:
<!-- 字符串 逗号分隔字符串, a,b 分别为组件名 -->
<keep-alive include="a,b">
<component :is="currentView"></component>
</keep-alive>
<!-- 正则表达式 -->
<keep-alive :include="/a|b/">
<component :is="currentView"></component>
</keep-alive>
<!-- 数组 -->
<keep-alive :include="['a', 'b']">
<component :is="currentView"></component>
</keep-alive>
更多推荐
已为社区贡献1条内容
所有评论(0)