vue slot的使用

65 阅读1分钟

slot的作用就像一个布局的模板,布局已经写好了,显示的内容由用户来决定。这样对于布局一样的组件,就不用写多份了。
slot分为匿名插槽和具名插槽

匿名插槽不插入内容时

上代码

1640770499(1).png 显示为

1640770560.png

匿名插槽插入内容时

1640770792(1).png

显示为

1640770823(1).png

具名插槽

上代码

1640772003(1).png

动态传递插槽名字

上代码

1640772166(1).png

作用域插槽

目的是想要在插槽中访问到子组件中的数据,正常情况下,每个组件中的数据是不能直接被其他组件访问到的。所以有了这个作用域插槽的概念
上代码

1640774877(1).png