多语言展示
当前在线:1605今日阅读:27今日分享:41

vue slot-scope如何使用

单个插槽 | 默认插槽 | 匿名插槽首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。
工具/原料

vue slot-scope

方法/步骤
1

1.通过一个例子来展示。父组件代码:

2

2.子组件代码:

3

3.因为父组件在里面写了html模板,那么子组件的匿名插槽这块模板就是下面这样。也就是说,子组件的匿名插槽被使用了,是被下面这块模板使用了。

4

4.最终的渲染效果:

5

5.具名插槽父组件代码:

7

7.显示结果如下图效果:

推荐信息