当前位置：首页 > news >正文

vue3中插槽

news 来源：原创 2025/6/19 11:46:59

具名插槽

vue2中会有这样用法：

//父组件
<template>
  <child-component>
    <template slot="empty">
      这是 empty 插槽的内容
    </template>
  </child-component>
</template>

slot=“empty” 这个写法是 Vue 2 中的具名插槽语法，用户可能在某个父组件中通过这个语法向子组件的特定插槽传递内容

而在 Vue 3 中，这种写法被废弃了

在 Vue 3 中，slot=“empty” 的用法已经被替换为新的语法。Vue 3 引入了一种更统一的插槽语法，移除了 Vue 2 中的具名插槽语法 (slot=“name”)，改为使用 v-slot 指令。

vue3的用法

<template>
  <child-component>
    <template v-slot:empty >
      这是 empty 插槽的内容
    </template>
  </child-component>
</template>

Vue 3 还支持简写形式，直接使用 #

<template>
  <child-component>
    <template #empty>
      这是 empty 插槽的内容
    </template>
  </child-component>
</template>

总结

Vue 2 使用 slot=“empty”
Vue 3 使用 v-slot:empty 或简写 #empty

插槽作用域

在Vue3中，slot-scope 已被废弃，取而代之的是新的 v-slot 语法。虽然 slot-scope 在 Vue2 中用于定义作用域插槽，但在 Vue3 中，推荐使用 v-slot 进行插槽的定义和使用。注意：v-slot只能在template或者vue组件上使用，比如div上使用，会报错

// vue2语法
<div class="custom-tree-node" slot-scope="{ node, data, store }">
</div>

//vue3语法
<template class="custom-tree-node" v-slot="{ node, data, store }">
</template>
//或者针对具名插槽
<template class="custom-tree-node" v-slot:header="{ node, data, store }">
</template>
//也可以使用简写
<template class="custom-tree-node" #header="{ node, data, store }">
</template>