当前位置: 首页 > Web前端 > vue.js

深入理解vue中的slot和slot-scope

时间:2023-04-01 00:22:50 vue.js

之前写的关于vue中的slots的文档很短,语言很简洁,加上它和methods,data,computed等常用选项的使用频率,使用顺序的不同可能会导致刚接触sockets的开发者容易说“算了,以后再学吧,反正能写出基本的组件”,于是你关闭了vue文档。其实slot的概念很简单,下面分为三个部分。这部分也是按照vue文档的顺序写的。在进入三部分之前,先让没有接触过slot的同学对slot是什么有一个简单的概念:slot,即槽,是一个组件的HTML模板,这个模板是否显示,以及如何显示由父组件决定。其实这里就突出了slot的两个核心问题,要不要显示,怎么显示。由于slot是模板,所以任何组件从模板类型上都可以分为两类:非slot模板和slot模板。非槽位模板是指html模板,指的是'div,span,ul,table'等。非槽位模板的显示和隐藏以及如何显示由插件本身控制;slot模板是一个slot,是一个空壳,因为它的显示和隐藏以及用什么样的html模板显示都是由父组件控制的。但是slot显示的位置是由子组件自己决定的。slot写在组件模板的地方,以后会显示父组件传过来的模板。单槽|默认插槽|匿名插槽首先是单个插槽。singleslot是vue的官方名称,其实也可以叫做defaultslot,或者相对于namedslot,我们可以称之为anonymousslot。槽。因为它不需要设置name属性。单个插槽可以放置在组件中的任何位置,但正如它的名字一样,一个组件中只能有一个这种类型的插槽。相应的,命名槽可以有多个,只要名字(name属性)不同即可。一个例子如下所示。父组件:子组件:在这个例子中,因为父组件将html模板写在中,那么子组件匿名槽的模板如下。换句话说,使用了子组件的匿名插槽,它被下面的模板使用。Menu1Menu2Menu3Menu4Menu5Menu6

最终渲染结果如图所示:注:所有demo都设置了样式,方便观察。其中,父组件填充灰色背景,子组件填充浅蓝色。命名插槽匿名插槽没有名称属性,因此它们是匿名插槽。然后,将名称属性添加到插槽成为命名插槽。命名插槽可以在组件中出现N次。出现在不同的位置。以下示例是一个具有两个命名插槽和一个插槽的组件。这三个槽位由同一套css样式的父组件显示,只是内容略有不同。父组件:子组件:显示结果如图:可以看到,父组件通过html模板上的slot属性与命名插槽相关联。默认情况下,没有插槽属性的html模板与匿名插槽相关联。作用域插槽|带数据的插槽最后,我们的作用域插槽。这有点难以理解。它被正式称为作用域插槽。其实和前面两个slot相比,我们可以称它为有数据的slot。什么意思,也就是前两个在组件的template中写的是匿名槽命名槽,但是作用域槽要求,在数据绑定到插槽。也就是说,你必须写这样的东西。exportdefault{data:function(){return{data:['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']}},}前面说过,slot是否显示在最后取决于父组件是否在子组件下写了模板,如下图。htmltemplate写好了,槽要在浏览器上显示一些东西。问题是html应该是什么样子。如果不写,slot就是一个什么都没有的空壳。OK,假设有html模板,就是父组件会把模板插入到子组件中,那么插入什么样的样式,这个是由父组件的html+css决定的,但是里面的样式这套内容呢?只是因为scopedslot绑定了一组数据,父组件才能使用它。于是,情况就变成了这样:父组件的样式说了算,但是内容可以通过子组件槽位绑定来显示。再对比一下,scopedslots和singleslots和namedslots的区别,因为singleslots和namedslots不绑定数据,所以父组件提供的模板必须同时包含样式和内容,上面的例子中,文中你看,“Menu1”和“Menu2”都是父组件自己提供的内容;而范围槽,父组件只需要提供一组样式(如果范围槽确实用于绑定给定数据)。在下面的例子中,可以看到父组件提供了三种样式(flex、ul、directdisplay),都没有提供数据,数据使用的是子组件slot本身绑定的name数组。父组件:
    {{item}}
{{user.data}}我是模板
子组件:exportdefault{data:function(){return{data:['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']}}}结果如图:上面三个github上的demo都放在github上了,需要的时候用起来很方便。它是基于vue-cli构建的项目。地址点这里