如何使用自定义标签 VueJs 呈现动态内容“组件”

Question

我有一个来自Laracasts Tabs Tutorial的服装制作的 Tabs 和 Tab，它工作正常，但我需要在选项卡更改时加载数据，我这样做了，但是在加载数据时，

我需要渲染另一个具有手风琴的组件，并且在每个手风琴选项卡内，它们的一些图表组件也需要渲染

因此，当“选项卡”选项卡被更改时，如何使用图表组件渲染手风琴

标签组件：

 <template>

    <div class="tab-container -mt-px w-full">
        <div class="tabs">
            <ul class="list-reset flex border-b">

                <li class="" v-for="(tab, index) in tabs" role="tab">
                    <a class="bg-white inline-block font-semibold hover:no-underline"
                       :class="[
                        {
                           'active-tab-link text-blue-dark  border-l border-r active-tab-link-p': tab.isActive,
                           'text-blue hover:text-blue-darker non-active-tab-link-p': !tab.isActive
                       },
                       ]"
                       :href="tab.href" @click="selectedTab(tab)">
                        {{tab.name}}
                    </a>
                </li>
            </ul>
        </div>

        <div class="tabs-details px-4 w-full">
            <slot></slot>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Tabs",

        data() {
            return {
                tabs: []
            };
        },

        created() {
            this.tabs = this.$children;
            // this.selectFirstTab();
        },

        methods: {

            selectedTab(selectedTab) {

                this.$emit('onTabChange', selectedTab);

                this.tabs.map((tab, index) => {
                    tab.isActive = (tab.name === selectedTab.name)
                });

            },
        }
    }
</script>

选项卡组件：

<template>

    <div class="w-full" role="tabpanel" v-show="isActive">
        <slot></slot>
    </div>

</template>

<script>
    import {isEmpty} from "../helpers/Helper";

    export default {
        name: "Tab",
        props: {
            name: {
                type: String,
                required: true
            },
            selected: {
                type: Boolean,
                default: false,
            },
            isFirst: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                // isActive: false,
                isActive: true,
                // isFirst: this.isFirst
            };
        },

        computed: {
            href() {
                return this.formatHref(this.name);
            },
        },

        mounted() {

            this.selectTabFromURL();

        },
        methods: {

            selectTabFromURL() {
                let hash = this.$route.hash;

                if (this.selected) {
                    this.isActive = this.selected;
                } else if (!isEmpty(hash)) {
                    this.isActive = (this.formatHref(this.name) === hash);
                } else if (this.isFirst) {
                    this.isActive = this.isFirst;
                } else if (!this.isFirst && this.isActive) {
                    this.isActive = !this.isActive;
                }
            },

            formatHref(id) {
                return `#${id.toLowerCase().replace(/ /g, '-')}`;
            }


        }
    }
</script>

主要成分：

<template>
 <!--components tabs start-->
            <div class="flex flex-col">
                <div class="mt-3 border-t-4 border-primary-color border-6 bg-white">
                    <div class=" border border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400  rounded-b lg:rounded-b-none lg:rounded-r leading-normal">

                        <Tabs @onTabChange="handleTabChange">

                            <!--:name="`${tab.name} - ${tab.component.type}`"-->
                            <Tab v-for="(tab, index) in page.tabs"
                                 :key="tab.id"
                                 :id="tab.slug"
                                 :name="tab.name"
                                 :slug="tab.slug"
                                 :isFirst="index === 0"
                            >

                             <div>
                                 How to render the dynamic accordion with the charts one time only no need to re-render 
                             </div>


                            </Tab>

                        </Tabs>

                    </div>
                </div>
            </div>
            <!--components tabs end-->
</template>

在正常的 HTML 和 JQuery 中，我可以加载数据并渲染结果和 append 它到想要的选项卡我们如何使用 vue 做到这一点，在这种情况下使用动态组件帮助？

Answer 1

我搜索了一个解决方案并找到并实现了“以编程方式创建 Vue.js 组件实例”