vue动态组件的实现和传值

动态组件的实现和传值

1.动态组件的实现

动态组件是使用 component 组件，通过一个特殊的attribute is 来实现

<template>
  <div>
    <button
      v-for="tab in tabs"
      :key="tab"
      :class="{ active: currentTab === tab }"
      @click="tabClick(tab)"
    >
      {{ tab }}
    </button>
  </div>
</template>

这个currentTab的值需要是什么内容呢？

1. 可以是通过component函数注册的组件；
2. 在一个组件对象的components对象中注册的组件；

动态组件的传值

2.动态组件的传值

只是我们需要将属性和监听事件放到component上来使用

<template>
  <div>
    <component :is="currentTab" :age="18" name="why" @pageClick="pageClick" />
  </div>
</template>

<template>
  <div class="comprehensive-table-container">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, i) in getPageTabs"
        :key="i"
        :label="item.label"
        :name="item.name"
      />
    </el-tabs>
    <keep-alive exclude="superPractice">
      <component :is="component" ref="activeNameTab" />
    </keep-alive>
    <comment-modal @on-emit-sumit="onEmitSumit" />
  </div>
</template>

<script>
  import { ref, computed, reactive, provide } from 'vue'
  import superPractice from './components/superPractice'
  import dreamland from './components/dreamland'
  import headlines from './components/headlines'
  import knowledge from './components/knowledge'
  import matrix from './components/matrix'
  import shines from './components/shines'
  import starts from './components/starts'
  import CommentModal from '@/views/interaction/comment/components/modal/index.vue'

  import { useStore } from 'vuex'
  export default {
    name: 'Comment',
    components: {
      superPractice,
      dreamland,
      headlines,
      knowledge,
      matrix,
      shines,
      starts,
      [CommentModal.name]: CommentModal,
    },
    setup() {
      // tabs 分栏
      const AllTabs = ref([
        {
          label: '精选好课', //原 超级修炼
          name: 'superPractice',
          permissions: 'btn_superPractice',
        },
        {
          label: '知识精华',
          name: 'knowledge',
          permissions: 'btn:knowledge',
        },
        {
          label: '高手矩阵',
          name: 'matrix',
          permissions: 'btn_matrix',
        },
        {
          label: '星辰大海',
          name: 'starts',
          permissions: 'btn_starts',
        },
        {
          label: '梦想之境',
          name: 'dreamland',
          permissions: 'btn_dreamland',
        },
        {
          label: '世界头条',
          name: 'headlines',
          permissions: 'btn:headlines',
        },
        {
          label: '闪耀社团',
          name: 'shines',
          permissions: 'btn_shines',
        },
      ])
      const stroe = useStore()
      const getPageTabs = ref([])
      AllTabs.value.forEach((item) => {
        stroe.state.user.elements.map((element) => {
          if (element.mapping === item.permissions) getPageTabs.value.push(item)
        })
      })
      // 当前选中tab
      const activeName = ref(getPageTabs.value[0].name)
      const activeNameTab = ref(null)

      const component = computed(() => {
        return activeName.value
      })

      const statusModal = reactive({
        status: false, // 弹窗状态
        data: {
          resourceList: [], // 资源 id 的集合
          status: 1, // 点赞形式 1 无指定点赞人 2 指定点赞人
          number: 1, // 点赞数量
          uidList: [], // 用户 id 的集合 无指定用户时为空
          module: 1, // @/utils/module/modulesDivide
          type: 1, // 1 帖子 2 评论
        }, // 弹窗所需数据
      }) // 弹窗

      provide('statusModal', statusModal) // 弹窗数据注入
      function onEmitSumit() {
      //子组件直播那个的方法init调用 当每次动态组件变化的时候调用该子组件中的init方法
        activeNameTab.value.init()
      }
      return {
        getPageTabs,
        activeName,
        component,
        onEmitSumit,
        activeNameTab,
      }
    },
  }
</script>