这时候,我们已经使用 slot ,在子组件中占了一个坑,但是我们还没有填充内容,接下来填充内容:
可以看到,填充的内容,确实在子组件中显示
假如,我们去掉子组件的插槽,父组件在子组件填充的内容还能看到吗?我们来试一试:
可以看到:浏览器中,只显示两个组件原本的信息,父组件填充的内容是看不到的。
在 slot 中,不仅可以填充文字,也可以填充图片、视频、HTML结构等,如填充图片:
浏览器中显示如下:
2.具名插槽
具名插槽,顾名思义,就是带有名字的插槽,具有 name 属性,一个不带 name 的
<
slot>
会带有默认的名字 default 。
在子组件中,slot 指定 name 属性
我是插槽默认的内容,当父组件不填充任何内容时,我这句话才会出现
在父组件中,需要使用 template ,在 template 模板中,指定 slot 在子组件中的 name 值
我是父组件
![](https://img-blog.csdnimg.cn/img_convert/7e95bea01cde8d1c744ebfe3fe43df75.jpeg)
浏览器可以正常显示填充的内容:
假如,我们在父组件中,只写了 template ,并没有指定 slot 在子组件中的 name 值,
那么,浏览器中:
也就是说,在引用子组件的代码中, template 中的slot 是根据等号 = 后面的值,来寻找对应的插槽 slot ,从而在对应的位置上,填充相应的内容。当我们使用的插槽数量比较多时,具名插槽就有很大的实用性。
3.作用域插槽
如果数据在子组件,可以在子组件中直接使用数据,但根据数据生成的结构需要组件的使用者来决定,我们就需要用到作用域插槽,同时,我们也可以实现多种结构。
例如:games数据在子组件中,但使用数据所遍历出来的结构由父组件App决定
子组件中,使用 指明使用什么数据,并将数据传给插槽的使用者
我是子组件
{{title}}
我是插槽默认的内容,当父组件不填充任何内容时,我这句话才会出现
在父组件中,使用子组件通过插槽传递过来的数据,渲染结构,有3种形式:
我是父组件
- {{g}}
- {{g}}
{{g}}