Vue3在render函数中使用slot
Vue3 在 render 函数中使用 slot
工作上有一个需求:需要为一个按钮添加文本提示,我使用的是 Tooltip 组件,不过这个模块需要使用 render 函数编写,所以需要在 render 函数中使用到 slot
在网上查到的资料大部分都不太可行或代码过于臃肿,最后在官方文档找到了解决方案
自定义插槽
自己编写组件时使用 slot
默认插槽
render 函数渲染后等价于下面的 html
render
1 | h('div', slots.default()) |
html
1 | <div> |
单个具名插槽
render 函数渲染后等价于下面的 html
render
1 | h('div', slots.header( |
html
1 | <div> |
多个具名插槽
render 函数渲染后等价于下面的 html
render
1 | h('div', null, [ |
html
1 | <div> |
传递插槽
使用组件时,设置组件的插槽内容
单个默认插槽
1 | h(MyComponent, null, () => 'hello world') |
具名插槽
1 | h(Ntooltip, null, { |
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 View Room
评论