Vue插槽
一、概念
要了解 slot 插槽 , 首先需要了解自定义组件,以及组件中的模板
举例:
自定义一个组件名 tag1
//组件模板为
var tag1mes = {
template:`<dl>
<dt>狮子</dt>
<dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
</dl>`
}
...定义一个局部组件
components:{
tag1:tag1mes
}
...
在结构中加入这个组件,利用浏览器调试工具,可以看到渲染的结构为
<dl>
<dt>狮子</dt>
<dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
</dl>
此时此刻,如果我们想进一步丰富template模板中展示内容的灵活性,可以借助插槽slot
需求:如果我们想把模板中的狮子替换成老虎
二、如何实现?
1. 匿名插槽
<tag1>老虎</tag1> //将要写的内容写在标签内,像HTML标签一样
var tag1mes = {
template:`<dl>
<dt><slot></slot></dt>
<dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
</dl>`
}
此时,老虎会渲染到slot位置。
2. 具名插槽
<tag1 :fatherdata="fatherdata">
<template slot="tit">老虎</template>
<template slot="mes">大型猫科动物;毛色浅黄或棕黄色,满身黑色横纹;头圆、耳短,耳背面黑色,中央有一白斑甚显著。</template>
</tag1>
template:` <dl>
<dt><slot name="tit">狮子</slot></dt>
<dd><slot name="mes">是一种生存在非洲与亚洲的大型猫科动物</slot></dd>
</dl>`
通过slot name的属性,将template slot=“name名” 一一对应起来。
3. 作用域插槽
意义何在?
如果你想 父组件访问子组件内部数据
slot-scope="slotProps" //slotProps为自定义的变量名,指向子组件中的data函数返回值
<tag1>
<template slot="tit" slot-scope="slotProps">
{{slotProps.txt1}}
</template>
<template v-slot:mes></template>
</tag1>
var tag1mes = {
data:function(){
return {
txt1:'我是子组件里的数据: 猫头鹰'
}
},
template:` <dl>
<dt><slot name="tit" v-bind:txt1="txt1">狮子</slot></dt>
<dd><slot name="mes">是一种生存在非洲与亚洲的大型猫科动物</slot></dd>
</dl>`
}
结果为:我是子组件里的数据: 猫头鹰
是一种生存在非洲与亚洲的大型猫科动物