关于vue动态组件的使用

当一个组件内需要根据动态判断使用不同组件时使用该方法

//is 当前调用组件
//ref 动态钩子
<component :is="activeKey" :ref="activeKey"></component>

data() {
    return {
      activeKey: '',//当前调用组件 这个值和各个注册的组件名一样
    }
  },
  
  handleTab(key) {
      this.activeKey = key
    },

通过路由query判断显示动态组件示例

<component class="componentStyle" :is="componentName"></component>
components: { ....需要的组件}

computed: {
    componentName() {
      return this.$route.query.componentName
    }
  },