Vue3.x 与 Vue2.x 插槽区别

1、基本用法

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

Vue3.x 与 Vue2.x 插槽区别

2、具名插槽

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

vue3写法

Vue3.x 与 Vue2.x 插槽区别

vue2写法

Vue3.x 与 Vue2.x 插槽区别

这里有两点需要注意

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

3、作用域插槽

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

vue3

Vue3.x 与 Vue2.x 插槽区别

vue2

Vue3.x 与 Vue2.x 插槽区别

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

加载中...
加载中...