Vue3.x 与 Vue2.x 插槽区别

1、基本用法

基本用法基本是相同的，没有什么改动，vue3和vue2都可以这样用

2、具名插槽

具名插槽两者用法有稍微不同，Vue3使用v-slot:[name]（缩写#[name]），而Vue2用的是slot="name"

vue3写法

vue2写法

这里有两点需要注意

• vue3在父组件中使用具名插槽使用v-slot，而vue2使用slot
• vue3必须把v-slot写在template标签中，而vue2中的slot可以写在任意标签中

3、作用域插槽

经常我们会想让父组件的slot能够访问子组件的数据。

vue3

vue2

有关Vue3.x插槽的更多写法详见文档。