VUE动态组件component以及<keep-alive>
component
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>动态组件</title>
8 </head>
9 <body>
10 <div id="app">
11
12 <button @click='chgComponent("componentOne")'>组件1</button >
13 <button @click='chgComponent("componentTwo")'>组件2</button>
14 <button @click='chgComponent("componentThree")'>组件3</button>
15 <!--动态组件 ,更具is的值来确定渲染哪个组件 -->
16 <component :is="componentId"></component>
17 </div>
18 <script src="./vue.js"></script>
19 <script>
20
21 Vue.component('componentOne',{
22 template: `
23
24 <div>组件1</div>
25
26 `
27 })
28 Vue.component('componentTwo',{
29 template: `
30
31 <div>组件2</div>
32
33 `
34 })
35 Vue.component('componentThree',{
36 template: `
37
38 <div>组件3</div>
39
40 `
41 })
42 new Vue({
43 el: '#app',
44 data() {
45 return {
46 componentId: 'componentOne'
47 }
48 },
49 methods: {
50 chgComponent: function(componentId){
51
52 this.componentId = componentId
53 }
54 },
55 })
56 </script>
57 </body>
58 </html>
注意:component动态组渲染组件时,当切换组件后,之前的组件会被销毁,用户之前在该组件的数据也会被清除,所以我们会使用<keep-alive>包裹动态组件,此时失活的组件会被缓存,当它被在此渲染的时候能够保留之前用户的数据
Keep-alive
-
Props:
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。
-
用法:
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当组件在
<keep-alive>
内被切换,它的activated
和deactivated
这两个生命周期钩子函数将会被对应执行。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>动态组件</title>
8 </head>
9 <body>
10 <div id="app">
11
12 <button @click='chgComponent("componentOne")'>组件1</button >
13 <button @click='chgComponent("componentTwo")'>组件2</button>
14 <button @click='chgComponent("componentThree")'>组件3</button>
15
16 <!--
17 1.include: 表示会缓存所写入的数组
18 2.exclude:表示不缓存所写入的组件
19 3.max:表示最大缓存组件的个数,其值等于当前组件加历史组件个数的和,如果这个数大于max的则缓存最近使用的max个组件。
20 -->
21
22 <!-- 失活组件会被缓存,注意 include后面的值不能由空格 -->
23 <keep-alive include= 'componentOne,componentTwo'>
24 <!--动态组件 ,更具is的值来确定渲染哪个组件 -->
25 <component :is="componentId"></component>
26 </keep-alive>
27
28 <!-- 失活组件会被缓存,注意 exclude后面的值不能由空格 -->
29 <keep-alive exclude= 'componentOne,componentTwo'>
30 <!--动态组件 ,更具is的值来确定渲染哪个组件 -->
31 <component :is="componentId"></component>
32 </keep-alive>
33
34 <!-- 失活组件会被缓存,注意 exclude后面的值不能由空格 -->
35 <keep-alive max= '2'>
36 <!--动态组件 ,更具is的值来确定渲染哪个组件 -->
37 <component :is="componentId"></component>
38 </keep-alive>
39
40 </div>
41 <script src="./vue.js"></script>
42 <script>
43
44 Vue.component('componentOne',{
45 template: `
46
47 <div>
48 <h3>组件1</h3>
49 <input type="text">
50 </div>
51
52 `
53 })
54 Vue.component('componentTwo',{
55 template: `
56
57 <div>
58 <h3>组件2</h3>
59 <input type="text">
60 </div>
61
62 `
63 })
64 Vue.component('componentThree',{
65 template: `
66
67 <div>
68 <h3>组件3</h3>
69 <input type="text">
70 </div>
71
72 `
73 })
74 new Vue({
75 el: '#app',
76 data() {
77 return {
78 componentId: 'componentOne'
79 }
80 },
81 methods: {
82 chgComponent: function(componentId){
83
84 this.componentId = componentId
85 }
86 },
87 })
88 </script>
89 </body>
90 </html>
一:Vue中提供了<component>来挂载不同组件,使用 is 选择要展示的组件
效果
image.png
案例
index.vue
<template>
<div>
<component :is="cmpName"></component> <br/>
<button @click="changeCmp('cmpone')">第一个组件</button>
<button @click="changeCmp('cmptwo')">第二个组件</button>
<button @click="changeCmp('cmpthree')">第三个组件</button>
</div>
</template>
<script>
// 导入子组件
import cmpone from './cmpone'
import cmptwo from './cmptwo '
import cmpthree from './cmpthree '
export default {
// 注册组件
components: {
cmpone,
cmptwo,
cmpthree
},
methods: {
changeCmp(cmpName) {
this.cmpName = cmpName
}
},
data(){
return {
cmpName: 'cmpone' //默认显示第一个组件
}
}
}
</script>
cmpone.vue
<template>
<div>这是子组件1</div>
</template>
cmptow.vue
<template>
<div>这是子组件2</div>
</template>
cmpthree.vue
<template>
<div>这是子组件3</div>
</template>