今天写一篇关于vue组件的扩展用法, 之前将一些基本用法已经写过了,没有看过的可以自行找一下,今天要写的是一片关于vue 官方给的动态组件的一种用法,其实这个用法的使用场景使用基本组件也是可以胜任的,只是既然有这样一种写法的存在,我们还是需要实现一下,网上呢关于他的用法写的也有很多,我一般写的文章都是最基础的使用方法,没有一些花里胡哨的写法,所以很容易看得明白!废话不多说,上代码
<template>
<div>
{{msg}}
<el-checkbox>苹果</el-checkbox>
<el-checkbox>香蕉</el-checkbox>
<el-checkbox>橙子</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'this is A'
}
}
}
</script>
<style>
</style>
<template>
<div>
{{msg}}
<el-switch v-model="value" active-text="左边" inactive-text="右边">
</el-switch>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'this is B',
value: true
}
}
}
</script>
<style>
</style>
<template>
<div>
<el-button @click="showChild('A')">显示A组件</el-button>
<el-button @click="showChild('B')">显示B组件</el-button>
<keep-alive>
<component :is='currCom'></component>
</keep-alive>
</div>
</template>
<script>
import childA from '../childComponent/childA.vue'
import childB from '../childComponent/childB.vue'
export default {
components: {
childA,
childB
},
data() {
return {
currCom: childA
}
},
methods: {
showChild(Str) {
this.currCom = 'child' + Str
}
}
}
</script>
<style scoped="scoped">
/deep/ .el-button {
margin: 10px;
}
</style>
上面三段就是实现了一个简单的动态组件的全部代码,childA组件是第一个子组件,childB组件是另一个子组件,我们引入组件的时候还是一样的import的方式,但是渲染的时候方式是直接使用component,使用:is来决定展示哪一个组件,这里使用keep-alive的原因呢,组件每一次渲染都是全新的,会导致一个现象就是之前用户的操作丢失,为了保证用户的操作的原本性,使用缓存的标签就可以了,效果如下: