Vue $slots.default

最新推荐文章于 2025-03-13 20:48:01 发布

理个以哈呦

最新推荐文章于 2025-03-13 20:48:01 发布

阅读量1.2w

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/qq_15253407/article/details/88688236

版权

js 专栏收录该内容

79 篇文章

订阅专栏

// 子组件demo
<template>
    <div>
        <slot></slot>
        <slot name="up"></slot>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        name: "pending-disposal-list",
        created(){
            // this.$slots 包含所有插槽使用的数组 在改测试中返回 {default: Array(2), up: Array(4)}
            // 在父组件中使用默认插槽2次，up插槽4次
            // this.$slots.default 返回默认插槽的数组 {default: Array(2)} 
            // elment-ui el-button 中的用法  <span v-if="$slots.default"><slot></slot></span>
            console.log(this.$slots, this.$slots.default.length, 'slots');
        }
    };
</script>


// 父组件 demo
// 子组件demo
<template>
    <div>
        <pending-disposal-list>
            <section>默认的 solt</section>
            <section>默认的 solt</section>
            <section slot="up">up的 solt</section>
            <section slot="up">up的 solt</section>
            <section slot="up">up的 solt</section>
            <section slot="up">up的 solt</section>
        </pending-disposal-list>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        name: "parent",
    };
</script>