点击左上方“熊吱”关注我们吧!在Vue组件的使用过程中,常常会遇到组件大体框架相同,但是部分内容在不同页面上显示需求不同的情况,此时就可以使用插槽,类似于在组件中挖一个坑,可以进行组件模板的替换。
1
slot基本使用
插槽功能通过标签:来实现。
首先我们实现一个template,其中使用slot标签添加了一个插槽,插槽中放置了一个按钮标签,当组件标签中未添加内容时,就会默认显示按钮标签。
我是组件模板
我是组件模板
默认按钮
接着在DOM中对组件标签使用:
我是P标签
我是P标签
我是span标签
我是i标签
显示效果:
可以看出:
可直接在模板中使用一组标签进行插槽的添加;
若slot标签中添加了内容,但DOM使用组件标签未填充元素,slot标签中的内容会作为默认值显示。
DOM中组件标签中填充的内容,无论一个或多个,都会替换slot标签默认值,一起作为替换元素。
2
具名插槽
有时我们使用组件时需要多个插槽,就需要区分开每个插槽。
slot标签可以通过name属性给每个插槽命名:
左边
中间
右边
上述代码中,定义了left、right两个具名插槽,中间还有一个无名插槽,无名插槽有一个默认的名字:default。
在DOM中给插槽提供内容时,需要在元素上使用
v-slot
指令,并且在v-slot
后跟上插槽的名称:
left插槽 默认插槽 right插槽
没有被template包裹的内容会传入到无名插槽中。
注:v-slot
指令只能添加在标签上(除了独占默认插槽的缩写语法,见3.1节)。
2.1 v-slot语法糖
v-slot:
可以使用语法糖#
来替换,例如v-slot:right
可以写为#right
。
3
编译作用域
组件都有自己的编译作用域,比如在子组件中定义的data内容,在父组件中是不能访问的。但是在使用插槽的时候,有时往往需要替换的插槽内容能够访问子组件的数据,就会用到插槽Props
。
下列代码中,子组件的data定义了一个user对象,其中包含firstname与lastname的值,为了在父组件中能访问到user,我们就将user
作为slot
元素的一个attribute,通过v-bind绑定在slot标签上,此时被绑定的user就叫做插槽Props
。
子组件的template如下:
{{user.lastname}}
然后在父级作用域中,使用v-slot
来定义插槽Props
的名字,这里使用的名称为slotProps
,名称可以自定义,然后就可以在Mustache语法中使用插槽名称.插槽Props.属性
来访问子组件的数据:
{{slotProps.user.firstname}}
3.1 独占默认插槽的缩写语法
在第二节最后说到v-slot只能绑定在template上,而下面这种情况就是唯一的例外:当被提供的内容只有默认插槽(除了默认插槽不能再含有具名插槽或多个插槽)时,组件的标签才可以被当做插槽的模板来使用,有以下两种写法:{{slotProps.user.firstname}} {{slotProps.user.firstname}}
ENDVue之路系列文章:Vue之路 | 07-Vue组件化实现和使用Vue之路 | 06-表单绑定v-modelVue之路 | 05-v-on、v-if、v-forVue之路 | 04-计算属性computedVue之路 | 03-插值操作与V-bindVue之路 | 02-VSCODE添加Vue模板Vue之路 | 01-Vue安装与初体验
微信:熊吱
扫码关注我们
互联网知识交流平台
你的每个赞和在看,我都喜欢!