Vue——slot、slot-scope、scope、v-slot详解

最新推荐文章于 2025-05-02 20:21:16 发布

Wyyyy1024

最新推荐文章于 2025-05-02 20:21:16 发布

阅读量3.6k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44389562/article/details/110824763

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

slot

vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代

用于标记往哪个具名插槽中插入子组件内容。

<body>
     <div id="app">
        <slot-test>插槽的使用</slot-test>
		</div>
</body>

<script>
       Vue.component('slot-test',{
            template:`<div>
                <slot></slot>
                </div>`
        });
</script>

slot-scope

vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代

用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。

  <div id="app">
        <!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 -->
        <!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据'
            2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' -->
       <slot-test>
           <!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 -->
        <!-- <template v-slot="slotDate">
            {{slotDate.user.firstname}}
        </template> -->
        <!-- 第二种 slot-scope -->
        <template slot-scope="slotDate">
            {{slotDate.user.firstname}}
        </template>
       </slot-test>
    </div>
    
    <script>
        Vue.component('slot-test',{
            data:function(){
                return {
                    user:{
                    firstname:'冰冰',
                    lastname:'范'
                }
                }
            }
         }
		</script>

scope

被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。

用于表示一个作为带作用域的插槽的 <template> 元素，它在 2.5.0+ 中被 slot-scope 替代。

除了 scope 只可以用于 <template> 元素，其它和 slot-scope 都相同。

v-slot

可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

用法：提供具名插槽或需要接收 prop 的插槽 、

<template>
组件 (对于一个单独的带 prop 的默认插槽)

<body>
    <div id="app">
 <!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 -->
       <slot-frusts :list="list">
            <template v-slot="fruits">
                <span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span>
            </template>
       </slot-frusts>
    </div>
    
    <script>
        Vue.component('slot-frusts',{
           props:['list'],
            template:`
            <div>
                <ul>
                    <li :key='item.id' v-for="(item,index) in list">
                        <slot :info='item'>{{item.id}}</slot>
                    </li>
                </ul>
            </div>`
        });
        let options={
            el:'#app',
            data:{
              list:[{
                  id:1,
                  name:'apple'
              },{
                  id:2,
                  name:'orange'
              },{
                  id:3,
                  name:'banana'
              }]

            }

        }
        var vm=new Vue(options);
    </script>
</body>

具体参考： vue官方文档