Vue中component标签的了解

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>