欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 名人名企 > vue3中插槽

vue3中插槽

2025/4/25 13:33:09 来源:https://blog.csdn.net/weixin_43131046/article/details/146097817  浏览:    关键词:vue3中插槽

具名插槽

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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词