0
点赞
收藏
分享

微信扫一扫

《图解Vue3.0》- 第14节 动态组件和异步组件


动态组件

在内置指令中,有一个指令is,使用它可以实现动态组件。
使用动态组件方式:
​​​<component :is="currentView"></component>​

示例

dynamic.vue

<template>
<div style="padding:">
<button @click="change('1')">组件1</button>
<button @click="change('2')">组件2</button>
<button @click="change('3')">组件3</button>
<component :is="componentTag"></component>
</div>
</template>

<script>import { defineComponent } from '@vue/composition-api';
import component1 from '@/components/动态组件/component1';
import component2 from '@/components/动态组件/component2';
import component3 from '@/components/动态组件/component3';

export default defineComponent({
components: { component1, component2, component3 },
data() {
return {
componentTag: ''
}
},
methods: {
change(index) {
this.componentTag = 'component' + index
},
}
})</script>

compoent1/2/3.vue

<template>
<div class="container">
我是组件1的内容
</div>
</template>

<script>import { defineComponent } from '@vue/composition-api'

export default defineComponent({
created() {
console.log('1已创建');
},
beforeUnmount() {
console.log('1待销毁');
},
})</script>

《图解Vue3.0》- 第14节 动态组件和异步组件_00

在动态组件上使用 keep-alive

不知道在上面的例子中,大家有没有发现一个问题,就是当组件切换时,组件会被销毁。那么,如果为了提升性能,我能不能在切换的时候不销毁组件呢?自然是可以的,就是加上keep-alive。它的功能就是保持组件的状态,以避免反复重渲染导致的性能问题。

这里仅做了了一点变化:

<keep-alive>
<component :is="componentTag"></component>
</keep-alive>

dynamic.vue

<template>
<div style="padding:">
<button @click="change('1')">组件1</button>
<button @click="change('2')">组件2</button>
<button @click="change('3')">组件3</button>
<keep-alive>
<component :is="componentTag"></component>
</keep-alive>
</div>
</template>

<script>import { defineComponent } from '@vue/composition-api';
import component1 from '@/components/动态组件/component1';
import component2 from '@/components/动态组件/component2';
import component3 from '@/components/动态组件/component3';

export default defineComponent({
components: { component1, component2, component3 },
data() {
return {
componentTag: ''
}
},
methods: {
change(index) {
this.componentTag = 'component' + index
},
}
})</script>

《图解Vue3.0》- 第14节 动态组件和异步组件_00_02

异步组件

// TODO
学习vue router 时再完成此部分内容


举报

相关推荐

0 条评论