vue 插槽scope_Vue 插槽

一、概念

要了解 slot 插槽 , 首先需要了解自定义组件，以及组件中的模板

举例：

自定义一个组件名 tag1

//组件模板为

var tag1mes = {

template:`

狮子

是一种生存在非洲与亚洲的大型猫科动物

`

}

...定义一个局部组件

components:{

tag1:tag1mes

}

...

在结构中加入这个组件，利用浏览器调试工具，可以看到渲染的结构为

狮子

是一种生存在非洲与亚洲的大型猫科动物

模板页面渲染

此时此刻，如果我们想进一步丰富template模板中展示内容的灵活性，可以借助插槽slot

需求：如果我们想把模板中的狮子替换成老虎

二、如何实现?

匿名插槽

老虎 //将要写的内容写在标签内，像HTML标签一样

var tag1mes = {

template:`

是一种生存在非洲与亚洲的大型猫科动物

`

}

渲染后，狮子就变成老虎了

匿名插槽

此外可以添加默认值

var tag1mes = {

template:`

狮子

//slot中的是默认的，标签内为用户设置的，【设置没有显示默认，设置有，显示设置的】

是一种生存在非洲与亚洲的大型猫科动物`

}

呈现效果

老虎，渲染标题为老虎，

渲染结果为，默认的狮子，

最后，由于这种插槽没有name属性，因此叫【匿名插槽】

具名插槽

需求：如果不仅替换标题，还要替换标题的内容描述，怎么办？

显然

老虎， 大型猫科动物；毛色浅黄或棕黄色，满身黑色横纹；头圆、耳短，耳背面黑色，中央有一白斑甚显著。

怎么分开对应dt,dd标签是个问题

这时候可以使用具名插槽，见例子

老虎

大型猫科动物；毛色浅黄或棕黄色，满身黑色横纹；头圆、耳短，耳背面黑色，中央有一白斑甚显著。

template:`

狮子

是一种生存在非洲与亚洲的大型猫科动物

`

通过slot name的属性，将template slot="name名" 一一对应起来

具名插槽

三、新版本语法 v-slot

Vue的版本官方一直在更新变化，其中上面使用的 slot="xx" 以及后面会提及的 scope-slot="xx" 在2.6.0+ 中已弃用

所以我们要使用新的v-slot

语法格式

v-slot:slotName //slotName不能加双引号“”

匿名插槽在新语法下，默认指向default

v-slot:default

例子修改，结果仍然正常

老虎

大型猫科动物；毛色浅黄或棕黄色，满身黑色横纹；头圆、耳短，耳背面黑色，中央有一白斑甚显著。

注意事项

在旧版本中slot="xxx"的情况下，可以挂载在非 template标签上，如：

老虎

但是在v-slot:tit的情况下，必须使用template标签

老虎

否则报错：

Failed to compile.

v-slot can only be used on components or .

简写方式

如果你想使用简写语法，必需指定插值的名字

v-slot:header 简写成 #header

v-slot:default 简写成 #default

四、作用域插槽

意义何在？

如果你想 父组件访问子组件内部数据

语法格式：旧版本 slot-scope

slot-scope="slotProps" //slotProps为自定义的变量名，指向子组件中的data函数返回值

针对上面例子

//新旧语法不能混用在一个组件标签上

//slot="xxx" slot-scope="xx" 均为旧写法，是可以的

//v-slot:xxx slot-scope="xxx" 新旧写法混合，直接报错

//渲染错误： Unexpected mixed usage of different slot syntaxes

{{slotProps.txt1}}

var tag1mes = {

data:function(){

return {

txt1:'我是子组件里的数据: 猫头鹰'

}

},

template:`

狮子

是一种生存在非洲与亚洲的大型猫科动物

`

}

新语法格式为

v-slot:tit="slotProps" //slotProps为自定义的变量名，指向子组件中的data函数返回值

//将具名插槽赋值，很简洁；

//不仅完成插槽指向，还完成了数据挂载

例子改写：

{{slotProps.txt1}}

var tag1mes = {

data:function(){

return {

txt1:'我是子组件里的数据: 猫头鹰'

}

},

template:`

狮子

是一种生存在非洲与亚洲的大型猫科动物

`

}

上结果

作用域插槽

作用域插槽图解

父组件访问子组件内部数据

作用域插槽图解

插槽父子之间传值 2.6+

父组件

...

子组件

name="swiperSlide"

:dataMes='dataMes'

>

说明：

父组件通过 #slotName 获取子组件 ，

通过 { 数据名 } 获取子组件中的数据