vue3+vite+ts--插槽slot的详细使用

目录

一、插槽的作用

二、匿名插槽(默认插槽)

三、具名插槽

四、动态插槽名

五、作用域插槽


一、插槽的作用

- 插槽是Vue中常见的一种组件间的相互通信方式,作用是让父组件可以向子组件指定位置插入html结构,适用于父子组件,在要接收数据的组件页面通过标签来表示,简单来说,就是通过此标签来起到占位的作用,而要插入的内容也会对应到标签所在的位置,插槽又分为匿名插槽、具名插槽、作用域插槽

二、匿名插槽(默认插槽)



三、具名插槽

- 顾名思义插槽有名字,子组件在标签上name="插槽名字"父组件只需要写v-slot:插槽名字或者#插槽名字

- 父组件




- 子组件




- 结果

vue3+vite+ts--插槽slot的详细使用_第1张图片

 四、动态插槽名

- 在父组件把插槽名字设置为变量

- 父组件




- 子组件




 - 结果

vue3+vite+ts--插槽slot的详细使用_第2张图片

五、作用域插槽

- 子组件向父组件传递数据的一种形式,子组件在具名标签或者匿名标签上绑定数据,父组件在