Vue3项目中slot插槽不起作用(解决方法)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
修改:使用的每一个slot都需要一个 template 包裹,且 slot=“名称” 修改为 v-slot:名称
原来的写法:
//子组件
<template>
<div class="tab-bar-item">
<slot name="item-icon"></slot>
</div>
</template>
//父组件
<tab-bar-item>
<img slot="item-icon" src="../src/assets/img/tabbar/home.svg" alt="" />
</tab-bar-item>
修改后的写法:
//父组件,子组件无需修改
<tab-bar-item>
<template v-slot:item-icon>
<img src="../src/assets/img/tabbar/home.svg" alt="" />
</template>
</tab-bar-item>




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:9 个月前 )
9e887079
[skip ci] 8 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 11 个月前
更多推荐
所有评论(0)