1.component标签是什么?
component 标签是Vue框架自定义的标签,它的用途是可以通过动态绑定is属性来动态渲染组件。
2.如何实现动态渲染组件。
(eg:点击图标动态切换图标样式)
<el-icon style="margin-right:10px" @click="changeIcon">
<component :is="LayOutSettingStore.fold ? 'Fold' : 'Expand'"></component>
</el-icon>
//点击图标的方法
const changeIcon = () => {
//图标进行切换
LayOutSettingStore.fold = !LayOutSettingStore.fold
}
注:LayOutSettingStore为store的某个仓库里面存储了fold的值(true,false)。
依次可以一些自定义组件的动态渲染。
<template>
<div>
<div class="box" @click="change">
<component :is="show"></component>
</div>
</div>
</template>
<script>
import A from '@/components/A.vue'
import B from '@/components/B.vue'
export default {
data() {
return {
// show 表示要展示的组件的名字
show: 'A'
}
},
components: {
A,
B
}
</script>