动态组件的实现和传值
1.动态组件的实现
动态组件是使用component组件，通过一个特殊的attribute is来实现
<template><div><buttonv-for="tab in tabs":key="tab":class="{ active: currentTab === tab }"@click="tabClick(tab)">{{tab }}</button></div></template>
这个currentTab的值需要是什么内容呢？
可以是通过component函数注册的组件；在一个组件对象的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-panev-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)})})// 当前选中tabconst 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/modulesDividetype: 1, // 1 帖子 2 评论}, // 弹窗所需数据}) // 弹窗provide('statusModal', statusModal) // 弹窗数据注入function onEmitSumit() {//子组件直播那个的方法init调用 当每次动态组件变化的时候调用该子组件中的init方法activeNameTab.value.init()}return {getPageTabs,activeName,component,onEmitSumit,activeNameTab,}},}</script>
