作用域插槽

最新推荐文章于 2025-05-20 09:17:18 发布

咖木

最新推荐文章于 2025-05-20 09:17:18 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/dongdaxiaopenyou/article/details/80600657

前端学习专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何利用Vue.js中的作用域插槽提高组件的复用性和抽象能力。通过将v-for循环放入组件内部，并借助作用域插槽传递数据，实现更灵活的组件设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用域插槽增加了组件的抽象能力

比如我定义了一个my-list组件，在没有使用作用域插槽的时候，我可能会这么写my-list的模板：

        <div class="my-list">
            <h3 class="title">{{ title }}</h3>
            <div class="list">
                <slot></slot>
            </div>
        </div>

当然my-list组件还有一个属性props

props:['title']

那么我在使用my-list的时候，可能会这么写：

首先我得有一个vue实例（这个my-list我写做demo26的局部组件）

var demo26 = new Vue({
    el:"#demo26",
    components:{
        'my-list':{
            template:'#my-list',
            props:['title']
        }
    },
    data(){
        return{
            shapes:[
                { name:'正方形', sides:4},
                { name:'六边形', sides:6},
                { name:'三角形', sides:3}
            ],
            colors: [ 
                { name: '黄色', hex: '#f4d03f' }, 
                { name: '绿色', hex: '#229954' }, 
                { name: '紫色', hex: '#9b59b6' } 
            ]
        }
    }
})

然后html长这样

    <div id="demo26">
        <my-list title="形状">
            <div v-for="shape in shapes">
                {{shape.name}}<small>（{{shape.sides}}条边）</small>
            </div>
        </my-list>
        <my-list title="颜色">
            <div v-for="color in colors">
                <div class="colorbox" :style="{background:color.hex}"></div>{{color.name}}
            </div>
        </my-list>
    </div>

结果没有什么问题，但是，我们可以使用作用域插槽进一步增加组件的抽象能力，比如我在html中使用了v-for，但是现在我想把v-for写到组件里面，这个时候就有一个问题，我怎么把v-for需要的数据传到组件里面去，那么这个时候作用域组件就可以解决这个问题。

        <div class="my-list">
            <h3 class="title">{{title}}</h3>
            <div class="list">
                <slot v-bind="item" v-for="item in items"></slot>
            </div>
        </div>

    <div id="demo26_1">
        <!-- <my-list title="形状" :items="shapes">
            <template scope="shape">
                <div>{{shape.name}}<small>（{{shape.sides}}条边）</small></div>
            </template>
        </my-list>
        <my-list title="颜色" :items="colors">
            <template scope="color">
                <div>
                    <div class="colorbox" :style="{background:color.hex}"></div>{{color.name}}
                </div>
            </template>
        </my-list> -->

        <!-- 比scope更牛逼的是slot-scope，它不限制于template，可以在任何标签上使用 -->
        <my-list title="形状" :items="shapes">
            <div slot-scope="shape">{{shape.name}}<small>（{{shape.sides}}条边）</small></div>
        </my-list>

        <my-list title="颜色" :items="colors">
            <div slot-scope="color">
                <div class="colorbox" :style="{background:color.hex}"></div>{{color.name}}
            </div>
        </my-list>
            
    </div>

var demo26_1 = new Vue({
    el:"#demo26_1",
    components:{
        'my-list':{
            template:"#my-list1",
            props:['title','items']
        }
    },
    data(){
        return{
            // title:'形状',
            shapes:[
                { name:'正方形', sides:4},
                { name:'六边形', sides:6},
                { name:'三角形', sides:3}
            ],
            colors: [ 
                { name: '黄色', hex: '#f4d03f' }, 
                { name: '绿色', hex: '#229954' }, 
                { name: '紫色', hex: '#9b59b6' } 
            ]
        }
    }

})

参考：https://www.w3cplus.com/vue/vue-js-scoped-slots.html