初识 Vue（20）---（作用域插槽）

最新推荐文章于 2025-06-07 16:21:29 发布

原创最新推荐文章于 2025-06-07 16:21:29 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

从浅入深学 Vue

28 篇文章

订阅专栏

本文介绍了Vue中作用域插槽的使用方法及应用场景，通过一个具体案例展示了如何在子组件循环过程中，通过父组件传递作用域插槽来定制化显示列表内容。

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

作用域插槽

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽，为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽：

使用场景：当子组件做循环，或某一部分的DOM结构是由外部传递进来时

案例：子组件列表循环，传值到父组件中显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
       <child>
            <tempalte slot-scope="props"> 
                <li>{{props.item}} -hello</li>
            </tempalte>
       </child>
    <script>
    //在child中可以使用item 数据，item数据放到 props属性 中
       Vue.component('child',{
        data:function(){
            return{
                list:[1,2,3,4]
            }
        },
        //child 组件做列表的循环，列表中的每一项如何显示并不关心，显示由外部决定
        //外部组件调用chlid，需要向子组件传递slot，告知子组件如何显示列表的每一项
        //
        template:`<div>
                    <ul>
                        <slot 
                            v-for="item of list"
                            :item=item
                            >

                        </slot>

                    </ul>    
                </div>`
       })

       var vm = new Vue({
        el:'#root'
       })
    </script>   
</body>
</html>

输出：