千锋教育前端Vue3.0全套视频教程(Kerwin2023版,Vue.js零基础
2023-07-19 19:49 作者:bili_30465039590 | 我要投稿

- 默认插槽其实就是定义一个插槽slot标签,这个slot标签相当于一个打标识的作用,等着使用组件的时候,在组件标签里面写html结构,然后这些结构就会自动填充到在slot标签的位置
- 具名插槽和默认插槽类似,只不过在slot标签上添加name属性指定插槽的名字,当我们使用多个插槽的时候,这些插槽都有对应的名字,我们在组件标签里面写html结构的时候,如果需要哪些html结构放入对应名字的插槽,就要给这些html标签添加slot属性且属性值和指定插槽的name值是一样的。且具名插槽配合template标签(不参与编译)一起使用时,slot属性还可以写成v-slot:name名
- 如果你想要把几个元素一起放到同一个插槽的时候,你可以使用template标签去包裹,然后在template标签上添加slot属性就行,也可以写成v-slot:xxx。且v-slot属性只能用在template标签上,不能用在其他标签上面
- 总结:
①插槽的作用就是让父组件向子组件指定位置插入html结构,预留位置给子组件渲染。也是一种组件间的通信方式,适用于父子组件传递数据(html结构)
②插槽有三种分类:默认插槽、具名插槽、作用域插槽