精华内容
下载资源
问答
  • slot-scope

    2018-07-26 23:01:56
    其实就是 template 通过scope/slot-scope 属性 调用组建 slot 的属性,以达到可以调用组建属性实现复杂的嵌套

    其实就是 template 通过scope/slot-scope 属性 调用组建 slot 的属性,以达到可以调用组建属性实现复杂的嵌套

    展开全文
  • 如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了 v-slot使用方式1: ...
  • vue中插槽详解—从slot,slot-scope到v-slot的变化 前言 vue 插槽,目前到3.0有3种方式,第一种,在2.6之前使用的是slot 和 slot-scpe 2.6后已被官方废弃,但在2.x版本仍被支持,第二种是vue 在2.6版本后更新的新...

    前言

    vue 插槽,目前到3.0有2种方式,第一种,在2.6之前使用的是slot 和 slot-scpe 2.6后已被官方废弃,但在2.x版本仍被支持,第二种是vue 在2.6版本后更新的新指令 v-slot 来替代slot 和slot-scpe

    那么什么是插槽呢,作用又是什么

    插槽,简单说,插槽就是杯子,杯子里面装的是饮料还是牛奶,由外部倒入什么来决定 ,就好比下面的代码,我需要一个子组件,他有部分内容,需要根据我当前页面需要来展示,我如何将html模板传人到子组件就需要使用插槽。

    所以我定义了一个子组件item,我用solt标签定义了一个默认插槽,为在父组件使用时,需要传递到item组件的模板,占个位置, 这样我在组件,使用item子组件,在其中编写,html模板就会被渲染到子组件

    默认插槽

    父组件
    <template>
    <tab>
        <item >
            	<div>装一杯牛奶</div>
         <item>
     <tab>
    </template>
          
         
     //item子组件
         <template>
              <div>
                  <slot ></slot>//默认插槽   在父组件使用item子组件,item标签包裹的内容将默认被渲染到子组件的										solt中
                  <h1>
                   我是杯子  
             	</h1>
                  
             </div>
         </template>
         
         
         
    

    这样的好处,显而易见,可以让组件模块化更清晰,同时复用性更高,不至于,我要一杯茶,我就要定义一个组件,我要一杯牛奶我又定义一个组件,有了插槽,我只需要定义一个杯子,要喝什么由使用的传人决定。

    上述代码也叫默认插槽,就是默认把模板全部渲染到solt中,如果需要指定渲染,就需要使用具名插槽,简单说就是起一个名字,告诉他小红该坐那儿,小明该坐那儿

    具名插槽

    //父级
    <template>
        <div>
            <layout>
                <div solt="header">头部标题</div>
                 <div >显示的内容</div>
                 <div  slot="footer">尾部</div>
            </layout>
        </div>
    </template>
    
    
    //layout子组件
    <template>
        <div>
            <layout>
                <h1>layout子组件</h1>
                <slot name="header"></slot> //这种就叫具名插槽
                <slot></slot> //如果不指定名字,就会将模板中未匹配到的内容渲染到默认插槽中,这里为显示的内容
                <slot name="footer"></slot>
            </layout>
        </div>
    </template>
    

    **tip:**当你的子组件中 如layout 中并不存在,slot这个元素,那么在父页面中 这个标签中的内容都会被抛弃

    作用域插槽

    父组件提供了模板给子组件,那么子组件如何反馈给父组件呢,例如:我定义了一个杯子,我需要告诉使用的人,我这个杯子,只能装300mL,这时我们就需要用slot-scope来接收子组件上通过v-bind绑定的值。

    作用域插槽,就是能让插槽内容访问到子组件中才有的数据

    //父级
    <template>
        <div>
            <cup>
                <div solt="size" slot-scope="data">
                    {{data.msg}}
        		</div>
            </cup>
        </div>
    </template>
    
    //cup子组件
    <template>
        <div>
            <slot name="size" :msg="msg"></slot>
        </div>
    </template>
    <script>
    export default {
        data(){
        		return{
        			msg:'300mL大小的杯子'
    			}
    		}
    }
    </script>
    

    解构prop的写法

    下面写法等同上面

    //父级
    <template>
        <div>
            <cup>
                <div slott="size" slot-scope="{msg}">
                    {{msg}}
        		</div>
            </cup>
        </div>
    </template>
    

    上述是vue2.6之前的版本,之后vue官方废弃了上面的语法,改为v-solt来代替,然后大家就想知道,区别在哪呢

    首先就是 用一个指令合并了solt 和solt-scope2个attribute,写法更加简洁,其次就是语义化更明显

    2.6之前的写法会出现作用域混淆的问题

    例:

    <one>
      <two slot-scope="one"> //接受到的作用域,是外层one组件的,而不是当前组件two
        <three slot-scope="two">
          <template slot-scope="three">
            {{ one }} {{ two }} {{ three }}
          </template>
        </three>
      </two>
    </one>
    

    如上述代码一层子组件时,你能清晰的看清作用域是哪一个组件的,但多层嵌套后,每一层接收的作用域是外层组件的而不是当前组件的,这样,就会不清晰,所以vue希望能实现,当前组件,接受当前组件的作用域

    于是就有了v-solt 下面是改良后的代码,是否更加的清晰了

    <one v-slot="one">
      <twotwo v-slot="two">  //接收到的作用域为当前two组件的
        <three v-slot="three">
          {{ one }} {{ two }} {{ three }}
        </three>
      </bar>
    </one>
    

    如果没看懂 那么下面来阐述,v-solt的使用变化,

    v-solt 默认插槽

    和原来不同便是,原来的solt属性可以定义在任何元素上,现在v-solt只能是template元素上,只有一种额外情况,就是独占默认插槽,我们先看常规情况。v-slot:default这种就是具名的写法

    父组件
    <template>
        <item > 
            <template v-slot:default> // v-slot:default可以不加,只能定义在template上
                <div>装一杯牛奶</div>
    		</template>
            	
         <item>
    </template>
          
         
     //item子组件
         <template>
              <div>
                  <slot ></slot>//默认插槽   
                  <h1>
                   我是杯子  
             	</h1>
                  
             </div>
         </template>
         
    

    未具名的solt 元素,自动默认名为default 你可以不写,当然如果你要看的更清晰,

    独占默认插槽

    提供内容只有默认插槽,上述就满足此条件,所以我们可以这样写

    父组件
    <template>
        <item v-slot:default> //v-slot:default可以不加
                <div>装一杯牛奶</div>
         <item>
    </template>
          
         
     //item子组件
         <template>
              <div>
                  <slot ></slot>//默认插槽   
                  <h1>
                   我是杯子  
             	</h1>
                  
             </div>
         </template>
    

    v-solt具名插槽

    //父级
    <template>
        <div>
            <layout>
          	 <template v-slot:header>//v-slot指令使用插槽
                <div >头部标题</div>
             </template>
    
               <div >显示的默认内容</div>
                        <!--
             			或者
                 		<template v-slot:default>
                            <div >显示的默认内容</div>
                         </template>	
                 		-->
    		<template v-slot:footer>
                <div >尾部</div>
             </template>
             
            </layout>
        </div>
    </template>
    
    
    //layout子组件
    <template>
        <div>
            <layout>
                <h1>layout子组件</h1>
                <slot name="header"></slot> //这种就叫具名插槽
                <slot></slot> //如果不指定名字,就会将模板中未匹配到的内容渲染到默认插槽中,这里为显示的内容
                <slot name="footer"></slot>
            </layout>
        </div>
    </template>
    

    v-solt作用域插槽

    这是改动最大地方

    //父级
    <template>
        <div>
            <cup>
                <template v-slot:default="data"> //具名写法
                        <div>
                          {{data.msg}}   
                     </div>
    			</template>
    			   <!--
             			或者
                 		<template v-slot="data">
                            <div > {{data.msg}}   </div>
                         </template>	
                 		-->
    		
            </cup>
        </div>
    </template>
    
    //cup子组件
    <template>
        <div>
            <slot  name="size" :msg="msg"></slot >
        </div>
    </template>
    <script>
    export default {
        data(){
        		return{
        			msg:'300mL大小的杯子'
    			}
    		}
    }
    </script>
    

    当为独占默认插槽时,v-solt可以省略default不写

    注意默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确下面是官方的例子

    <!-- 无效,会导致警告 -->
    <current-user v-slot="slotProps">
      {{ slotProps.user.firstName }}
      <template v-slot:other="otherSlotProps">
        slotProps is NOT available here
      </template>
    </current-user>
    

    所以当出现多个插槽的时候,请使用完整的基于template 的语法

    解构props的写法

    这里使用上面cup组件的例子

    <template>
        <div>
            <cup>
                <template v-slot:default="{msg}"> //解构
                        <div>
                          {{msg}}   
                     </div>
    			</template>
    			 
            </cup>
        </div>
    </template>
    

    v-slot 的解构还提供 重命名的写法

    <template>
        <div>
            <cup>
                <template v-slot:default="{msg : size}"> //别名
                        <div>
                          {{size}}   
                     </div>
    			</template>
    			 
            </cup>
        </div>
    </template>
    

    动态插槽名

    v-slot 支持2.6的动态参数写法

    <layout>
      <template v-slot:[attributeName]>
        ...
      </template>
    </layout>
    

    这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "header",那么这个绑定将等价于 v-slot:header

    插槽的缩写

    2.6后插槽 可以把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

    v-slot:后面必须有值,不可写成#="{data}"

    <template>
        <div>
            <cup>
                <template #default="msg"> 
                        <div>
                          {{size}}   
                     </div>
    			</template>
    			 
            </cup>
        </div>
    </template>
    
    展开全文
  • 一.slot ...值得注意的是:内容要写在父组件中,然后分给需要的子组件,当slot多个时,可以...slot-scope就是作用域插槽。官方叫它作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的templat
  • 它取代了 slot 和 slot-scope。 也就是说如果你 vue 的版本是2.6.0+ 的就要使用 v-slot 下面我来介绍具体使用上的区别 slot,slot-scope <template slot="order" slot-scope="scope"><!-- 这里也可以...

    相同点:

    它们都是 VUE 提供的用来获取当前作用域内容的。

    不同点:

    2.6.0 中,vue 官方为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope。

    也就是说如果你 vue 的版本是2.6.0+ 的就要使用 v-slot
    在这里插入图片描述
    下面我来介绍具体使用上的区别

    • slot,slot-scope
    <template slot="order" slot-scope="scope"><!-- 这里也可以简写为 #order='scope' -->
         <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
         <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
    </template>
    
    • v-slot
    <template v-slot:order="scope"><!-- 这里也可以简写为 #order='scope' -->
         <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
         <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
    </template>
    

    上述代码实现的效果一样

    注意:‘order’ 是自定义的插槽名字

    关于插槽的深入理解 请参考官网:https://cn.vuejs.org/v2/guide/components-slots.html

    展开全文
  • 在 Element UI Table 的官网上,有一个“筛选”功能,里面可以利用 slot-scope,给表格记录打标签。 关键代码为: <template slot-scope=scope> <el type=scope.row.tag>{{scope.row.tag}} 这里首先利用 slot-...
  • vue常见错误-slot-scope

    千次阅读 2020-09-02 07:46:45
    错误情况: (Emitted value instead of an instance of Error) the “scope” attribute for scoped slots... The new “slot-scope” attribute can also be used on plain elements in addition to to denote scoped s

    错误情况:
    (Emitted value instead of an instance of Error) the “scope” attribute for scoped slots have been deprecated and replaced by “slot
    -scope” since 2.5. The new “slot-scope” attribute can also be used on plain elements in addition to to denote scoped s
    lots.
    解决问题:
    出现上面问题 是升级vue 2.5以上版本 导致的
    使用新的 slot-scope 来代替 scope

    展开全文
  • 主要介绍了vue中的slot与slot-scope的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在vue 2.5.0+ 中slot-scope替代了 scope template 的使用情形为,我们已经封装好一个组建,预留了插槽,使用 的插槽 首先 我们的创建一个组建 组建很简单有一个 slot,slot有两个属性 a=123,b=msg 下面是一个...
  • 主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中的slot与slot-scope

    2019-10-20 17:10:38
    深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解...
  • slot-v-slot-slot-scope混用

    千次阅读 2020-04-21 14:34:37
    具名插槽和默认插槽同时存在时,要把template写完整,即不能把默认插槽的缩写,v-slot:default写在组件行内
  • 理解vue之element-ui中的 <template slot-scope="scope">

    万次阅读 多人点赞 2018-08-22 16:45:45
    template slot-scope="scope"&gt; 在实际的使用过程中,这种用法当然不仅仅局限于此,其他的地方也会用到。到底这里有什么特别之处呢? 我们看看普通的table用法: 我们先说一说这个基础的用法...
  • slot-scope 插槽 的使用

    2021-01-07 16:16:19
    slot-scope 插槽 的使用 ——'<template slot-scope="scope">' 代码: <template slot-scope="scope"> <el-button size="mini" type="danger" icon="el-icon-delete" circle @click=...
  • 关于slot-scope="scope

    千次阅读 2019-07-26 15:51:00
    是什么:作用域插槽 做什么:解决父组件模板的...slot-scope的出现却实现了父组件调用子组件内部的数据,子组件的数据通过slot-scope属性传递到了父组件 怎么做: <template slot-scope="scope"> <el...
  • 主要介绍了深入理解vue中slot与slot-scope的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了 v-slot使用方式1: <...
  • <div><p>This PR add <code>vue/valid-slot-scope</code> rule. (#661) <p><code>vue/valid-slot-scope</code> rule checks whether every <code>slot-scope</code> (or <code>scope) attributes is valid. <p>Close...
  • Vue中的作用域插槽 v-slot和slot-scope的具体写法 在学习过程中因为Vue版本问题对slot-scope和v-slot的用法进行的一些探索
  • 深入理解vue中的slot与slot-scope 官网插槽 Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
  • vue scope 升级 slot-scope

    2018-11-01 10:52:24
    Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been ...slot-scope" since 2.5. The new "slot-scope" attribute can also be used on pl...
  • slot-scope=“scope” 的应用 <el-table-column label="索引值" width="400"> <template slot-scope="scope"> //--- 这里取到当前单元格 <span>{{ scope.$index }}</span>//--- scope.$...
  • 关于slot、slot-scope的指令的一些操作记录: 从vue2.6.0开始,slot、slot-scope已经被废弃,推荐使用v-slot; slot-scope是作用域插槽, 父组件中不能直接用子组件中定义的data数据。 而slot-scope的出现就是解决了...
  • eltable的slot-scope

    2021-03-30 11:24:59
    记录下slot-scope,后续进行系统学习,先打卡记录

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,330
精华内容 932
热门标签
关键字:

slot-scope