component动态组件

1.组件动态化

<template>
    <div>
        <button @click="handleChangeComp">切换</button>
        <component :is="currentTabComponent"></component>
    </div>
</template>

<script>
    import pageA from './components/pageA'
    import pageB from './components/pageB'
    import pageC from './components/pageC'
    export default {
        components:{
            pageA,
            pageB,
            pageC
        },
        data() {
            return {
                currentTabComponent: 'pageA',
                componentList: ['pageA','pageB','pageC'],
                index: 0
            }
        },
        methods: {
            handleChangeComp() {
                return this.componentList[this.index]
            }
        }
    }
</script>

 2.组件保持缓存

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

3.标签动态化

<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
// 检验格式的方法
import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.to)
    },
    // 返回不同的标签
    type() {
      if (this.isExternal) {
        return 'a'
      }
      return 'router-link'
    }
  },
  methods: {
    // 绑定标签的属性，根据检验的不同返回不同的标签再绑定各自的属性
    linkProps(to) {
      if (this.isExternal) {
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        to: to
      }
    }
  }
}
</script>

4.component绑定标签和组件的优先级

        标签的优先级高于组件的优先级，在自定义组件中，避免重名标签