Vue组件-插槽
发布时间：2024-08-03 10:01
1、默认插槽
使用：
1、先在组件内用slot占位，当使用组件并未给传入具体标签或内容时会显示默认内容
2、使用组件时, 传入具体标签插入，传入的标签会替换掉slot显示
2、具名插槽
使用：
1、使用场景：当一个组件内有2处以上需要外部传入标签的地方
2、 v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
3、v-slot可以简化成#使用
4、slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签
3、作用域插槽
使用：
1、使用场景：scope变量名自动绑定slot上所有属性和值
2、子组件, 在slot上绑定属性和子组件内的值
3、使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
4、scope变量名自动绑定slot上所有属性和值