Vue组件-插槽

1、默认插槽

Vue组件-插槽_第1张图片

使用:

1、先在组件内用slot占位,当使用组件并未给传入具体标签或内容时会显示默认内容
2、使用组件时, 传入具体标签插入,传入的标签会替换掉slot显示

2、具名插槽

Vue组件-插槽_第2张图片

使用:

1、使用场景:当一个组件内有2处以上需要外部传入标签的地方
2、 v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
3、v-slot可以简化成#使用
4、slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

3、作用域插槽

Vue组件-插槽_第3张图片

使用:

1、使用场景:scope变量名自动绑定slot上所有属性和值
2、子组件, 在slot上绑定属性和子组件内的值
3、使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
4、scope变量名自动绑定slot上所有属性和值

你可能感兴趣的:(vue.js,前端,javascript)