一篇搞定slot插槽
文章图片
vue里提供了一种将父组件的内容和子组件的模板整合的方法:内容分发,通过slot插槽来实现。在组件标签内部写入的内容默认的会被替换掉,如果想要在组件的模板里使用这些内容,就在对应的位置写上slot标签,这个slot标签就代表着这些内容。
匿名槽口
在父组件中使用子组件的时候,在子组件标签内部写的内容,在子组件的模板中可以通过来使用
slot槽口插入的内容
我是aaa组件
文章图片
image 具名槽口
父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名,在子组件的模板通过使用带有name属性的slot标签来放置对应的slot,当slot不存在的时候,slot标签内写的内容就出现。
slot上面通过name属性指定槽口名称,然后使用的时候通过slot="槽口名称"。
在上面的内容
在下面的内容
我是aaa组件
文章图片
image slot插槽让我们在原有模版的基础上,定制更加多样化的组件。
作用域插槽
当我们想在父组件中访问子组件内部的一些数据时,就需要在子组件内部的元素上动态绑定一个自定义属性,将数据传递到自定义属性上,通过slot传递给父组件使用。
绑定到元素上的属性我们称之为slot props。现在,在父组件中我们可以通过slot-scope给包含所有插槽 prop 的对象命名为prop,之后就可以通过prop来使用子组件中的数据了。
老师姓名:{{prop.teacher.name}} 老师年龄:{{prop.teacher.age}}
文章图片
image v-slot
现在我们使用v-slot
指令自 Vue 2.6.0 起被引入,提供更好的支持slot
和slot-scope
特性的 API 替代方案。在接下来所有的 2.x 版本中slot
和slot-scope
特性仍会被支持,但已经被官方废弃,且不会出现在 Vue 3 中。
v-slot
重构上面的代码:
老师姓名:{{prop.teacher.name}} 老师年龄:{{prop.teacher.age}}
一个不带
name
的
出口会带有隐含的名字“default”,使用时可以简化为v-slot="prop“
。具名槽口
子组件中通过name属性给槽口设定名称
父组件中通过
v-slot:名称
的方式来使用具名槽口
学生姓名:{{prop.student.name}} 学生年龄:{{prop.student.age}}
当我们在父组件中多次调用子组件时,可以通过设置不同的样式,来设定子组件中数据的展示形式。
父子组件通信案例
通过属性绑定和v-slot我们也可以在子组件中循环渲染父组件中的数据
首先我们在父组件中定义一组数据
data(){
return{
listData:[
{
name:"Tome",
job:"web前端"
},
{
name:"Lily",
job:"java"
}
]
}
}
将数据通过属性绑定的方式传递给子组件Home,并且设定一个v-slot插槽对象名称,这时候插槽内部就可以通过prop来访问数据
在Home组件中接收父组件传递过来的data
props:{
data:{
type:Array,
required:true
}
}
将data传递到slot的自定义属性list中
将Child组件插到Home组件的slot槽口中,并且Child组件可以通过prop.list来循环渲染数据,并且将item通过属性绑定的方式传递给Child
在Child组件中接收Home传递过来的data
props:{
data:{
type:Object,
required:true
}
}
并且在页面中通过key名来渲染数据
{{data.name}}
{{data.job}}
【一篇搞定slot插槽】渲染结果:
文章图片
image
推荐阅读
- 由伐木工引发的陈述
- 随笔一篇
- 我为什么写不出一篇读书分享稿()
- 2018-06-29|2018-06-29 这是我的第一篇文章 markdown
- 《如何写出一篇好文章》之赠送礼物的训练
- 为了女儿,我尝试画画——DIY绘本之《一支铅笔的梦想》(绘画小白的第一篇作品)
- 自得其乐
- 开工平安
- 用|用 Python 写网络编程(二)
- 只需5步,写出让人眼前一亮的软文