component动态组件

最新推荐文章于 2025-09-17 20:24:19 发布

原创最新推荐文章于 2025-09-17 20:24:19 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了Vue.js中的组件动态化技术，包括使用`<template>`的`v-bind:is`和`<keep-alive>`实现组件缓存，以及如何通过动态标签绑定和类型判断来灵活切换和定制属性。通过实例解析，提升应用的灵活性和性能优化。

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>