精华内容
下载资源
问答
  • 有时候我们的vue组件需要复制使用者传递的内容。 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div class="horse-lamp"&...

    有时候我们的vue组件需要复制使用者传递的内容。

    比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果

    使用者关注轮播内容的静态效果,组件负责让其滚动起来

    
    组件:
    <div class="horse-lamp">
        <div class="lamp">
          <slot name="lamps"></slot>
        </div>
        <div class="lamp">
          <slot name="lamps"></slot>
        </div>
    </div>
    
    使用者:
    <CarouselWidget>
        <div slot="lamps">123</div>
    </CarouselWidget>

    这种实现方式对于初始化的数据是没问题的,但是不支持slot内容的动态绑定,这是因为

    • vnode在vue中是唯一的
    • 一个vnode只会和一个dom节点绑定

    因此当组件使用者在声明节点时,因为只声明了一个div,后台只生成了1个vnode,最终虽然产生了2个div,但是vnode只和后面1个dom绑定了,当vnode修改时也只会修改1个dom

    解法:slot-scope
    使用slot-scope数据产生的每个slot都会产生一个新的vnode

    
    组件:
    <div class="horse-lamp">
        <div class="lamp">
          <slot name="lamps" :arr="arr"></slot>
        </div>
        <div class="lamp">
          <slot name="lamps" :arr="arr"></slot>
        </div>
    </div>
    
    使用者:
    <CarouselWidget :arr="info.column">
      <template scope="slotProps" slot="lamps">
          <component  v-for="(item, index) in slotProps.arr"
            :key="info.id"
            :is="templates[item.type]"
            :item="item"
          ></component>
      </template>
    </CarouselWidget>

    这种情况下component内容有改动,那么组件内容2个slot都会同步更新

    项目使用的vue版本是2.4.2,更高级的vue的slot-scope语法可能不太一样

    来源:https://segmentfault.com/a/1190000016747615

    转载于:https://www.cnblogs.com/datiangou/p/10130577.html

    展开全文
  • Vue slot-scope的理解(适合初学者)

    万次阅读 多人点赞 2018-07-27 16:32:04
    百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的。 先抛例程: <!DOCTYPE html&gt...

     鉴于还是有不少的同学搜到这篇文章,而这篇文章又是笔者早期写的,现在回过头来看发现有太多的不足,为避免误人子弟,重新撰写了一篇Vue slot 详解 ,有需要的同学可以去浏览一下。   

         百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的。

             先抛例程:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件之通过插槽(slot)分发内容</title>
        <script src="你的vue地址,请下载最新版的"></script>
        <script>
            Vue.component("test-slot",{
               // 插槽允许有默认内容
               template:
                   `<div>
                        <strong>Error!</strong>
                        <slot></slot>
                    </div>
                   `,
                data:function () {
                    return {
                        name:"perry"
                    }
                }
            });
        //    具名插槽
            Vue.component("slot-name",{
               template:
                   `<div>
                          <header>
                                <slot name="header"></slot>
                          </header>
                         <main>
                            <slot ></slot>
                         </main>
                         <footer>
                            <slot name="footer"></slot>
                         </footer>
    
                    </div>
                   `
            });
            
        //    作用域插槽
            Vue.component("todo-list",{
                inheritAttrs:false,
                props:{
                    todos:[Array,Object]
                },
                template:
                `<ul>
                    <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                        <slot :data="todo">{{todo.text}}</slot>
                    </li>
                 </ul>
                `
            });
                    
        </script>
        
        <style>
            li{
                list-style: none;
                display: inline-block;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--1、插槽内容  slot可以接收任何内容、代码,包括组件-->
            <test-slot>Something bad happened.你是谁啊,我认识你吗</test-slot>
            <test-slot>
                Something bad happened.
                <!--允许使用变量,但该变量必须是本作用域的才会生效,这里name的值将会是"岔道口"-->
                <h3>标题{{name}}</h3>
                <img src="img/flower.jfif" alt="图片无法显示">
            
            </test-slot>
            <!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名-->
            <slot-name>
                <h3>劝学</h3>
                <p>少壮不努力,老大徒伤悲</p>
                <p>光阴似箭,日月如梭</p>
                <template slot="header">
                    <ul >
                        <li>主页</li>
                        <li>关于时间</li>
                        <li>关于人生</li>
                        <li>关于未来</li>
                    </ul>
                </template>
                <p>你好啊</p>
                <p slot="footer">
                    <p>结尾</p>
                    <p>粤ICP备6545646456415</p>
                </p>
            </slot-name>
            
            <!--使用作用域插槽,通过slot-scope实现-->
            <todo-list :todos="todos">
                <template slot-scope="slotProps">
                    <span v-if="slotProps.data.isTrue">√</span>
                    {{slotProps.data.text}}
                </template>
            </todo-list>
            
            <!--使用ES2015结构语法-->
            <todo-list :todos="todos">
                <template slot-scope="{data}">
                    <span v-if="data.isTrue">√</span>
                    {{data.text}}
                </template>
            </todo-list>        
        </div>
            
        <script>
            new Vue({
                el:"#app",
                data:{
                    name:"岔道口",
                    todos:[
                        {text:"A",id:1,isTrue:true},
                        {text:"B",id:2,isTrue:true},
                        {text:"C",id:3,isTrue:false},
                        {text:"D",id:4,isTrue:true},
                    ],
                    // slotProps:""
                }
            })
            
        </script>
    </body>
    </html>

           例程中也写了普通插槽和具名插槽,这个我就不说,我就说一下作用域插槽。首先从“作用域插槽“”这个名字说起,本来你父组件的模板是无法使用到子组件模板中的数据,官网中有一句特别强调的话:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。这句话其实挺难理解,举个例子就知道了,

        <test-slot>

              Something bad happened.

             <!--允许使用变量,但该变量必须是本作用域的才会生效,这里name的值将会是"岔道口"-->

               <h3>标题{{name}}</h3>

               <img src="img/flower.jfif" alt="图片无法显示">

    </test-slot>

         这是我上面的例子,也就是说这里name必须是当前组件里的,不能是test-slot这个组件内部的数据,这是它作用域限制,name这个数据属于父组件的作用域,所以只能是父组件的数据。但是slot-scope的出现却实现了父组件调用子组件内部的数据,子组件的数据通过slot-scope属性传递到了父组件

    //    作用域插槽
        Vue.component("todo-list",{
            inheritAttrs:false,
            props:{
                todos:[Array,Object]
            },
            template:
            `<ul>
                <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                      //这里的:data=“todo”就是讲子组件todo这个数据传给了父组件
                    <slot :data="todo">{{todo.text}}</slot>//todo.text是默认值,父组件会把它覆盖掉
                </li>
             </ul>
            `
        });
    <!--使用作用域插槽,通过slot-scope实现-->
    <todo-list :todos="todos">
        <template slot-scope="slotProps">
            <span v-if="slotProps.data.isTrue">√</span>
            {{slotProps.data.text}}
        </template>
    </todo-list>

    使用的时候就是这样,从子组件传过来的名为data值为todo的数据将会被slot-scope接收,需要注意的是,slot-scope接收的是一个对象,这里命名为slotProps,也就是说你传过来的data将会作为slotProps的一个属性,所以需要slotProps.data才能调用到data。前面说了,data的值为todo,todo是什么呢?todo是todos遍历出来的,所以是一个对象。

    new Vue({
        el:"#app",
        data:{
            name:"岔道口",
            todos:[
                {text:"A",id:1,isTrue:true},
                {text:"B",id:2,isTrue:true},
                {text:"C",id:3,isTrue:false},
                {text:"D",id:4,isTrue:true},
            ],
            // slotProps:""
        }
    });

           我们已经理解了slot-scope特性,那么他有什么运用场景呢?我们可以试想一下,别人写好了一个组件,该组件已经封装好了,但他觉得,数据的显示风格让用户自己定义,就像我们上面,我们希望列表的样式由用户定义,比如我就加了一个√号。一开始最初的数据是我们传进去的,但数据必须进过子组件处理后,写组件那个人肯定希望显示的是处理后的数据。这时候slot-scope就无比重要了。

    展开全文
  • 作用域插槽slot-scopevue中的用法

    千次阅读 2018-12-05 11:17:15
    插槽slot分为:“匿名插槽”、“具名插槽”、“作用域插槽”; “作用域插槽”是需要在...template slot-scope="uesr"&gt;//slot-scope="user"就是插槽作用域的名字,是自己定义的。 &am

    插槽slot分为:“匿名插槽”、“具名插槽”、“作用域插槽”;
    “作用域插槽”是需要在插槽slot上绑定数据的。然后组件模板根据slot上绑定的数据进行操作。

    <div id="app">
    		<slot-tab>
    			<template slot-scope="uesr">//slot-scope="user"就是插槽作用域的名字,是自己定义的。
    				<ul>
    					<li v-for="item in uesr.doc">{{item}}</li>//user.doc就是取作用域中的doc数据。
    				</ul>	
    			</template>
    		</slot-tab>
    	</div>
    

    或者这样弄:(将doc进行解构)

    <div id="app">
    		<slot-tab>
    			<template slot-scope="{doc}">//slot-scope="{doc}"直接将slot绑定的数据直接解构然后应用。
    				<ul>
    					<li v-for="item in doc">{{item}}</li>//此时的数据doc就是绑定的doc
    				</ul>	
    			</template>
    		</slot-tab>
    	</div>
    
    Vue.component('slot-tab',{
    		data:function (){
    			return {
    				doc: {
    					title:'i am a solt',
    					contion: 'i want to use the slot'
    				}
    			}
    		},
    		template:`<div><h2>noise popular people population public pub </h2><slot v-bind:doc="doc"></slot></div>`//v-bind:doc="doc"就是插槽绑定的数据。
    	})
    
    var vm = new Vue({
    	el:'#app',
    	data: {}
    })
    

    总结:
    1、要在模板中的slot标签上绑定数据v-bind:dd=“dd”。
    2、要在使用组件时的template标签上定义作用域slot-scope=“aa”;
    3、使用数据时要作用域.数据(aa.dd)
    或者利用解构的语法:
    2、要在用组件时的template标签上解构数据slot-scope="{dd}";(是一组大括号);
    3、直接使用绑定的数据dd;

    展开全文
  • 一.slot 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由...slot-scope就是作用域插槽。官方叫它作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的templat
  • vue slot slot-scope

    2019-10-19 17:04:39
    https://segmentfault.com/a/1190000012996217 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。实际上,一...

    https://segmentfault.com/a/1190000012996217

     

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示怎样显示

    由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板插槽模板两大类。
    非插槽模板指的是html模板,指的是‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • vue scopeslot使用

    2021-08-26 11:10:08
    .2.0版本是用scope ,3.0版本是用slot-scope slot作用域row可以任意写,里面的结构体是{“good”: { “id”: 1, “name”: “孙悟空” } } good对应slot里面任意写的name属性,也就是name是啥,raw后面属性就是啥 &...
  • 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...
  • 主要介绍了vue中的slotslot-scope的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 关于vueslot-scope

    2019-06-18 07:57:17
    slot-scopevue2.10新增的一个作用域插槽,vue官网可以找的到,我就不贴链接了。 我平时主要的用法是配合elementUI里的table组件来使用,感觉很方便 以下是两个例子: <el-table> <el-table-column label=...
  • 深入理解vue中的slotslot-scope 官网插槽 Vue中插槽-----特殊特性slotslot-scope与指令v-slot的使用方法
  • vue中的slotslot-scope

    2019-10-20 17:10:38
    深入理解vue中的slotslot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解...
  • Vue插槽:slotslot-scope与v-slot vue 2.6.0+ 版本后 v-slot 替代 slotslot-scope 1.匿名插槽 父组件占位置,决定插入内容 <body> <div id="app"> <Test> <div>slot插槽占位内容<...
  • vue踩坑:scope / slot-scope

    千次阅读 2018-05-18 15:47:10
    slot-scope vue2.5版本中取代了scope。这篇博客就是说一下我对scope的理解。顾名思义 作用域插槽。主要原理就是首先通过传值给子组件,子组件中接收传来的值,再通过v-bind把值绑定在slot上。而slot 插槽接过来的...
  • 主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • slot 不具名插槽 // App 组件 <template> <div id="app"> <Test>...slot插槽占位内容<... import Test from '@/component/Test.vue'; export default { components: { T
  • -- 作用域插槽 slot-scope 这是之前的写法 vue官方已经废弃--> <!-- <template slot-scope="{data}"> {{data}} </template> --> <!-- 这是最新的写法 --> <template v-slot="scope"> {{scope}} </template> <!-- ...
  • 主要介绍了深入理解vueslotslot-scope的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue中插槽详解—从slotslot-scope到v-slot的变化 前言 vue 插槽,目前到3.0有3种方式,第一种,在2.6之前使用的是slotslot-scpe 2.6后已被官方废弃,但在2.x版本仍被支持,第二种是vue 在2.6版本后更新的新...
  • vue2.6.0之前使用,现已经是被废弃的,2.6.0之后新增v-slot替代 用于标记往哪个具名插槽中插入子组件内容。 <body> <div id="app"> <slot-test>插槽的使用</slot-test> </div> &...
  • VUE的插槽(slotslot-scope

    万次阅读 多人点赞 2019-05-23 11:59:58
    在之前的获取当前行数据中,最终的方案是使用了slot-scope="scope"的方式获取了当前行的数据,当时对slot-scope是个什么东东不了解。这两天查看了好多资料,有点明白了这个插槽是个什么东西。但是理解的不深,可能有...
  • vue slotslot-scope传值的理解

    千次阅读 2020-02-27 18:16:06
    vue slotslot-scope理解什么是slot1、匿名插槽与具名插槽2、作用域插槽解构插槽3、作用域插槽使用过程中的关键点:4、关于slot-scope 什么是slot slot是插槽,运用于组件之中,作为备用,添加需要临时添加的html...
  • Vue slot-scope

    2021-04-28 13:43:49
    关于Element UI 中 slot-scope 的理解 **在日常的项目开发中 Element UI 中的 Table 表格 是我们经常用到的组件 而这其中 又有一个非常重要的属性 slot-scope 但是这个属性在Element API中是没有的 那这时候 我们该...
  •   首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。 父组件 <template> <div class="father"> <h3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,584
精华内容 5,033
关键字:

scopeslotvue

vue 订阅