vue 动态组件的使用

柔光的暖阳◎ 2022-12-09 01:54 175阅读 0赞

通过is属性动态渲染组件

<template>
      <div class="tabs-select">
        <a-tabs :default-active-key="defaultActiveKey" size="small">
          <a-tab-pane
            v-for="item in tabs"
            :key="item.key"
            :tab="item.tab"
            :force-render="true"
          >
            <component
              :is="item.key"
              :type="type"
              :provinces-prop="provincesProp"
              :date-time="dateTime"
              :deleted-props="deletedProps"
              @selectProps="selectProps($event, item.key)"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>

js 文件中引入component

<script>
    import { tabs } from './config'
    
    const tabComponents = {}
    
    for (let i = 0; i < tabs.length; i++) {
      tabComponents[tabs[i].key] = tabs[i].import
    }
    
    export default {
      name: 'Tabs',
      components: tabComponents,
      props: {
        type: {
          type: String,
          default: ''
        },
        deletedProps: {
          type: Object,
          default: () => {
            return {}
          }
        },
        provincesProp: {
          type: Array,
          default: () => {
            return []
          }
        },
        dateTime: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          tabs
        }
      },
      computed: {
        defaultActiveKey() {
          return this.tabs[0].key
        }
      },
      watch: {},
      mounted() {},
      beforeDestroy() {
        this.$store.commit('severe/setSelectedProps', {})
      },
      methods: {
        selectProps(val, key) {
          this.$emit('selectProps', val, key)
        }
      }
    }
    </script>

对应的config文件

const tabs = [
      {
        key: 'publicWarn',
        tab: '预警信号',
        import: () => import('./Warning/index')
      },
      {
        key: 'obsStation',
        tab: '气象站',
        import: () => import('./Station/index')
      },
      {
        key: 'lightning',
        tab: '雷电',
        import: () => import('./Thunder/index')
      },
      {
        key: 'firePoint',
        tab: '山火',
        import: () => import('./Fire/index')
      },
      {
        key: 'satellite',
        tab: '卫星',
        import: () => import('./Satellite/index')
      },
      {
        key: 'radar',
        tab: '雷达',
        import: () => import('./Radar/index')
      }
    ]
    
    export { tabs }

注：可以使用 <keep-alive> - 组件切换保留数据 （此处没有使用）

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 动态组件

动态组件通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： var vm = new Vue

傷城~/ 2023年06月18日 03:54/ 0 赞/ 27 阅读

相关 VUE动态创建使用组件、覆盖根组件

<div id="app"> app根组件 </div> let app = new Vue({ el: 'app',

小灰灰/ 2023年02月26日 14:22/ 0 赞/ 9 阅读

相关 vue中动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：效果如下 ![2020102319164871.gif][] 灰色的两个按钮A,B 用于切换组

曾经终败给现在/ 2022年12月17日 07:29/ 0 赞/ 260 阅读

相关 vue 动态组件的使用

通过is属性动态渲染组件 <template> <div class="tabs-select"> <a-tabs :default-a

柔光的暖阳◎/ 2022年12月09日 01:54/ 0 赞/ 176 阅读

相关 Vue动态组件渲染

子组件封装动态切换的子组件一 <template> <div> 我是多行文本框{ { config.name }

今天药忘吃喽~/ 2022年11月10日 05:38/ 0 赞/ 270 阅读

相关【Vue】—动态组件

【Vue】—动态组件 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

迈不过友情╰/ 2022年09月11日 12:22/ 0 赞/ 255 阅读

相关 Vue动态组件

Vue动态组件 1、序言 2、实例 1、序言在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

╰+攻爆jí腚メ/ 2022年08月30日 01:56/ 0 赞/ 261 阅读

相关 vue中的动态组件

1. 动态组件是由vue内置标签component上的is属性确定的，is属性的值，就是组件的名字第二种方法，用v-for，需要注意的是，type的值只是用来做标识的

约定不等于承诺〃/ 2022年04月16日 02:00/ 0 赞/ 321 阅读

相关 vue——动态组件

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组

ゞ浴缸里的玫瑰/ 2021年09月14日 12:58/ 0 赞/ 495 阅读

相关 vue 动态组件

1、引入组件,并在components中注入 2、动态组件 <component :is='x'></component> is

矫情吗；*/ 2021年07月24日 23:23/ 0 赞/ 530 阅读