Vue初学23-作用域插槽的使用

最新推荐文章于 2025-02-24 00:10:06 发布

置顶周达

最新推荐文章于 2025-02-24 00:10:06 发布

阅读量355

点赞数 1

分类专栏： vue 文章标签：作用域slot 作用域插槽 slot-scope

本文链接：https://blog.youkuaiyun.com/gis_zhouda/article/details/105725757

版权

vue 专栏收录该内容

37 篇文章

订阅专栏

本文深入探讨了Vue中作用域插槽的使用场景与方法，解释了如何在父组件中访问子组件的数据，并通过实例展示了早期版本中template标签与slot-scope属性的应用。

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

使用作用域插槽的原因

由于作用域的限制，父组件在替换子组件的插槽时只能引用父组件中的数据。如果父组件在替换子组件插槽是要用子组件中的数据，就要用到作用域插槽。

作用域插槽的基本使用方法

子组件中的slot要动态绑定一个属性，用于传递数据，例如：data="xxx"，父组件在替换slot的时候，早期版本需要用到template标签，绑定slot-scope="yyy"属性,然后通过绑定的yyy引用slot中传递的数据。如下：

<body>
    <div id="app">
        <mycpn></mycpn>
        <mycpn>
            <template slot-scope="slot">
                <span>{{slot.data.join('-')}}</span>
            </template>
        </mycpn>
        <mycpn>
            <template slot-scope="slot">
                <span>{{slot.data.join(';')}}</span>
            </template>
        </mycpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <slot :data="fruits">
                <ul>
                    <li v-for="item in fruits">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>

        //相当于vue的子组件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '我是子组件标题',
                    fruits:['苹果','香蕉','桔子']
                }
            }
         }
        //创建并注册组件
        Vue.component('mycpn',mycpn);
        //vue相当于父组件
        const vue = new Vue({
            el:"#app",
            data:{
                title:"我是标题"
            },
            components:{
                mycpn:mycpn
            }
        });
    </script>
</body>

效果如下：