Vue.js学习笔记——10.组件化开发(一)
Vue.js学习笔记——11.组件化开发(二)
Vue.js学习笔记——12.组件化开发(三)
九、动态组件
有时我们需要在不同的组件间进行动态的切换,比如一个多标签的页面
以上可以通过使用<component>
标签搭配is
属性来实现。
用法:
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
其中currentTabComponent
可以是:
- 已注册组件的名字
- 一个组件的选项对象
写一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="switchCpn">切换组件</button>
<component :is="cpnList"></component>
</div>
<template id="cpn">
<div>
<h2>我是组件cpn</h2>
<p>我是cpn的内容</p>
</div>
</template>
<template id="cpn2">
<div>
<h2>我是组件cpn2</h2>
<p>我是cpn2的内容</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
cpnList: 'cpn'
},
components: {
cpn:{
template:'#cpn'
},
cpn2:{
template:'#cpn2'
}
},
methods: {
//点击按钮切换cpnList的值
switchCpn() {
this.cpnList == 'cpn' ? this.cpnList='cpn2' : this.cpnList='cpn'
}
}
})
</script>
</body>
</html>
执行结果:
可以看到,当is
绑定的cpnList改变时,渲染的组件随之改变,每次切换组件时都会重新渲染一个新的组件实例。
十、在动态组件上使用keep-alive
到此为止,动态组件实现的效果,好像v-if
也同样能实现,但是,当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重新渲染导致的性能问题。
引用官方的例子:
如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的实例。
为了解决这个问题,我们可以用一个<keep-alive>
标签将其动态组件包裹起来,让里面的组件实例能够被在它们第一次被创建的时候缓存下来。
用法:
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
写个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="switchCpn">切换组件</button>
<component :is="cpnList"></component>
<keep-alive>
<component :is="cpnList"></component>
</keep-alive>
</div>
<template id="cpn">
<div>
<h2>我是组件cpn</h2>
<input>
</div>
</template>
<template id="cpn2">
<div>
<h2>我是组件cpn2</h2>
<p>我是cpn2的内容</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
cpnList: 'cpn'
},
components: {
cpn:{
template:'#cpn'
},
cpn2:{
template:'#cpn2'
}
},
methods: {
//点击按钮切换cpnList的值
switchCpn() {
this.cpnList == 'cpn' ? this.cpnList='cpn2' : this.cpnList='cpn'
}
}
})
</script>
</body>
</html>
执行结果: