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

    2016-12-24 22:11:32
  • Slot

    2014-05-24 13:13:09
    #ifndef SPINE_SLOT_H_ #define SPINE_SLOT_H_ #include #include #include namespace cocos2d { namespace extension { struct Skeleton; typedef struct Slot { SlotData* con

    #ifndef SPINE_SLOT_H_

    #define SPINE_SLOT_H_


    #include <spine/Bone.h>

    #include <spine/Attachment.h>

    #include <spine/SlotData.h>


    namespace cocos2d { namespace extension {


    struct Skeleton;


    typedef struct Slot {

    SlotData* const data;

    struct Skeleton* const skeleton;

    Bone* const bone;

    float r, g, b, a;

    Attachment* const attachment;

    } Slot;


    Slot* Slot_create (SlotData* data, struct Skeleton* skeleton, Bone* bone);

    void Slot_dispose (Slot* self);


    /* @param attachment May be 0 to clear the attachment for the slot. */

    void Slot_setAttachment (Slot* self, Attachment* attachment);


    void Slot_setAttachmentTime (Slot* self, float time);

    float Slot_getAttachmentTime (const Slot* self);


    void Slot_setToSetupPose (Slot* self);


    }} // namespace cocos2d { namespace extension {


    #endif /* SPINE_SLOT_H_ */


    展开全文
  • Vue中slot的使用(通俗易懂)

    万次阅读 多人点赞 2018-06-01 14:00:35
    在vue中使用slot插槽个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参;开发背景:正常情况下,&lt;Child&gt;&lt;span style=”color:red;”&gt;hello ...

     

    个人理解:
    是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参;

     

    开发背景(slot出现时为了解决什么问题):
    正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉,当想让组件标签Child中内容传递给组件时需要使用slot插槽;
     
    Slot的通俗理解
     
    是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=mySlot>有命名时,组件标签中使用属性slot=mySlot的元素就会替换该对应位置内容;

     
    Slot使用

     

    1、(匿名插槽)组件中有单个或多个未命名slot标签时,如下:

     

    <Child><span style=”color:red;”>hello world</span></Child>   

     

    <template>    

      <div>

    <slot></slot>

    <slot  style=”color:blue;” >这是在slot上添加了样式</slot>

    <slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>

    </div>

    </template>

    会输出:两个红色的hello world,以及一个使用slot的默认内容

     

    注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);

     

     

    2、(具名插槽)组件中有多个命名的slot插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:
     

     

    <Child>

    <span slot="header">hello world</span>

    <span slot="main">hello world</span>

    <span slot="footer">hello world</span>

    <span slot="other">{{otherData}}</span>

    </Child>

     

    <template>

    <div>

    <slot  name=”header”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”main”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”footer”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”other”>这是拥有命名的slot的默认内容</slot>

    </div>

    </template>

     

    3、作用域插槽!!:
    使用时候子组件标签<Child>中要有<template slot-scope=scopeName>标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;
     

    作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:

       <ul>

          <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

             slot的默认内容

          </slot>

       </ul>

     

       <Child>

          <template slot="item" slot-scope="props">

            <li>{{props.myname}}</li>

          </template>

       </Child>

     

     

     

    展开全文
  • vue中插槽详解—从slotslot-scope到v-slot的变化 前言 vue 插槽,目前到3.0有3种方式,第一种,在2.6之前使用的是slotslot-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>
    
    展开全文
  • 如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了 v-slot使用方式1: ...
  • 1、slot作用/概念:预先将将来要使用的内容进行保留; 2、具名插槽:给slot起个名字 3、slotslot-scope已经被废弃推荐使用vue2.6.0中的v-slot;但是这边还是对新旧方法对做一下使用说明。 slot插槽(不具名) <...
  • 主要介绍了Vue.js 作用域、slot用法(单个slot、具名slot),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 它取代了 slotslot-scope。 也就是说如果你 vue 的版本是2.6.0+ 的就要使用 v-slot 下面我来介绍具体使用上的区别 slotslot-scope <template slot="order" slot-scope="scope"><!-- 这里也可以...
  • slot-v-slot-slot-scope混用

    千次阅读 2020-04-21 14:34:37
    具名插槽和默认插槽同时存在时,要把template写完整,即不能把默认插槽的缩写,v-slot:default写在组件行内
  • 如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了 v-slot使用方式1: <...
  • 在学Vue的时候,看到说slotslot-scope被弃用了,换成了v-slot,然后我找了挺多案例,都没怎么看懂,然后经过测试,写一下我的想法,如果错了,和我说一下(。・`ω´・)谢谢 我只说写法怎么改了: 原来的: <调用...
  • 理解插槽及其slotslot-scope、v-slot特性的使用 什么是插槽 Vue本身实现了一套完善的内容分发的机制,使用<slot>元素作为内容分发的出口,也就是插槽。插槽内的模板<template>、HTML代码以及组件会...
  • slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块HTML模板,这块模板...
  • 插槽slot进行扩展

    2018-05-05 11:15:32
    slot
  • scoped slot

    2019-11-07 20:22:12
    scoped slot关于scoped slot自学 关于scoped slot自学 看了官方的例子,总是会报错firstName is undefined,原来不能在父级里面定义user,而是在子级里面定义user。例子如下: <current-user> <template v...
  • 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。slotslot-scope 这两个目前已被废弃,仍可使用,据说3.0后要没了 旧slot用法 子组件: <div> <slot name=“test”>...
  • v-slot的用法(去除了slotslot-scope) 具名插槽 根组件 <div id="app"> <Son> <template v-slot:name><!-- 这里注意是v-slot:子组件的插槽名 --> <span>替换了</span> ...
  • 主要介绍了深入理解vue中slotslot-scope的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • slot vue2.6.0之前使用,现已经是被废弃的,2.6.0之后新增v-slot替代 用于标记往哪个具名插槽中插入子组件内容。 <body> <div id="app"> <slot-test>插槽的使用</slot-test> </div...
  • vue slot

    2020-04-21 01:20:00
    在注入的自组件中,通过slot能够访问父组件的数据 <base-icon name="users">{{ event.attendees.length }} attending</base-icon> default slot multi slot 需要使用name MediaBox.vue <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,800
精华内容 19,920
关键字:

slot