VUE_插槽传递参数，作用域插槽

最新推荐文章于 2024-03-22 16:42:47 发布

小歪 | 前端

最新推荐文章于 2024-03-22 16:42:47 发布

阅读量306

点赞数

分类专栏： # VUE3 # VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44599931/article/details/131243437

版权

VUE 同时被 2 个专栏收录

114 篇文章 3 订阅

订阅专栏

11 篇文章 1 订阅

订阅专栏

vue2文档
 vue3文档

匿名插槽

templ.vue

<template>
    <div>
        <slot v-bind="{pack}"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pack: {name: 123}
        }
    }
}
</script>

使用

<template>
    <div>
        <templ>
            <template v-slot="{ pack }">
                <div>
                    {{pack}}
                </div>
            </template>
        </templ>
    </div>
</template>

<script>
import templ from '@/components/templ.vue'
export default {
    components:{
        templ
    },
};
</script>

具名插槽

templ.vue

<template>
    <div>
        <slot name="myslot" v-bind="{pack}"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pack: {name: 123}
        }
    }
}
</script>

使用

<template>
    <div>
        <templ>
            <template #myslot="{pack}">
                <div>
                    {{pack}}
                </div>
            </template>
        </templ>
    </div>
</template>

<script>
import templ from '@/components/templ.vue'
export default {
    components:{
        templ
    },
};
</script>