Question

我正在尝试使用Vue.js制作标签组件。在阅读完文档后，我无法理解$ slot的工作原理。

Tabs.Vue

<template>
    <div class="s12">
        <ul class="tabs">
            <li v-for="tab in tabs"
                :class="[{ 'active': tab.isActive},  colspacing]"
                class="tab col"
            >

                <a :index="tab.index"
                   @click="selectTab(tab.index)"
                   href="#"
                ></a>
                <slot/> 
            </li>

        </ul>


    </div>
</template>

<script>
    export default {
        props: ['colspacing'],
        data() {
            return {
                tabs: [],
                activeTab: '',
            }
        },
        mounted() {
            this.tabs = this.$children;
        },
        methods: {
            selectTab(index) {
                this.tabs[index].isActive = true;
                this.tabs[index].addClass('active');
                this.activeTab = index;
            }
        }
    }
</script>

Tab.Vue

<template>
    <section v-if="!isActive">
        <slot/>
    </section>
</template>

<script>
    export default {
        props: {

            index: { required: true }
        },

        data: () => ({
            isActive: false,

        })
    };
</script>

我在我的主app.vue

中使用它

<tabs colspacing="s6">
      <tab index="attached">Attached</tab>
      <tab index="pending">Pending</tab>
</tabs>

根据我的理解，在Tabs.vue中我将插槽放在li标签内，因此我的标签组件应该在li组件内部呈现.Intide挂载方法在Tabs.vue中我在数组中得到0个子节点。

然而，如果我在Tabs.vue中像这样在外面插槽，它工作正常

修改了Tabs.vue

<template>
    <div class="s12">
        <ul class="tabs">
            <li v-for="tab in tabs"
                :class="[{ 'active': tab.isActive},  colspacing]"
                class="tab col"
            >

                <a :index="tab.index"
                   @click="selectTab(tab.index)"
                   href="#"
                >{{tab.index}} ({{tab.size}})</a>

            </li>

        </ul>
        <slot/>

    </div>
</template>

<script>
    export default {
        props: ['colspacing'],
        data() {
            return {
                tabs: [],
                activeTab: '',
            }
        },
        computed: {

        },
        mounted() {
            this.tabs = this.$children;
        },
        methods: {
            selectTab(index) {
                this.tabs[index].isActive = true;
                this.tabs[index].addClass('active');
                this.activeTab = index;
            }
        }
    }
</script>

任何人都可以解释为什么插槽标签不能在li内部工作但是它在ul外工作的原因？

$ slot如何在Vue.js中运行？

0 个答案: