vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘

这篇具有很好参考价值的文章主要介绍了vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

警告的异常信息:
'Slot "default" invoked outside of the render function'
解决方法:

如下给Tabs组件加一个defaultValue的默认值即可

参考:https://github.com/tusen-ai/naive-ui/issues/3134文章来源地址https://www.toymoban.com/news/detail-813256.html

            <NTabs type="segment"  themeOverrides={{
                colorSegment: "#c6c6c6"
            }}
                   defaultValue={"one"}
            >
                <NTabPane displayDirective={"show"} name={"one"} >
                    <CommonTable
                        columns={this.hostColumns}
                        showLoading={this.showLoading}
                        tableData={this.hostTableData}
                        tableConfig={this.tableConfig}
                        showToolsBar
                    >
                    </CommonTable>
                </NTabPane>

                <NTabPane displayDirective={"show"} name={"two"} >

                    <CommonTable
                        columns={this.cbsColumns}
                        showLoading={this.showLoading}
                        tableData={this.cbsTableData}
                        tableConfig={[]}
                        showToolsBar
                    >
                    </CommonTable>

                </NTabPane>

            </NTabs>

到了这里,关于vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的几款UI组件库:Naive UI、Element Plus、 Ant Design Vue、Arco Design

    vue3系列的三款ui框架简要对比: 框架 Element Plus Naive ui Ant Design Vue Arco Design 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现 社区活跃度

    2024年02月03日
    浏览(46)
  • vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

    基于 vue3.x + typescript + vite + naive ui + tailwindcss + jsx + vue-router + pinia,项目使用 tsx 作为模版输出,全程没有使用vue提供的SFC, 仿macos桌面前端项目,开源免费模版,希望减少工作量和学习新技术,希望能够帮助大家; 本人主要是后端的开发,对于前端我也是刚入门的小白,有很

    2024年02月07日
    浏览(39)
  • Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能

    记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。 效果如下: 终端下输入: 起好项目的名称,然后一路回车即可。 至此Vue3的项目已经搭建完毕,打开http://127.0.0.1:5173/就可以看到项目的默认首页了。 安装Naive UI依赖库 然后我们根据官方出的配置对项目进行

    2024年02月12日
    浏览(42)
  • vue3+Naive UI+fastapi 前后端分离 Pagination 数据分页实战演练

    记录一次vue3+Naive UI+fastapi 前后端分离 Pagination 数据分页实战演练的过程。 Naive UI 是一个 Vue3 的组件库。 FastAPI 是一个用于构建 API 的现代、快速(高性能)的 web 框架,使用 Python 3.6+ 并基于标准的 Python 类型提示。 fastapi-backend 后端目录 vue-frontend 前端目录 这里我只贴一些关

    2024年02月06日
    浏览(46)
  • Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响,引入后发现项目组件库的组件样式不对了(Element/Ant Design Vue/Naive UI/TDesign)

    网上的教程都无法解决,但本文可以帮助您快速解决该问题。 当项目引入 Tailwind css 后,使用 UI 组件库的某些组件时,发现有些样式丢失及显示错位、背景色丢失等问题, 频发于【按钮组件】背景色丢失 | 【message消息提示组件】样式位置变形等,严重的整个组件库样式都乱

    2024年02月07日
    浏览(60)
  • vue3+vite的项目报错 await import(‘source-map-support‘).then((r) => r.default.install()) ^^^^^Synta

      await import(\\\'source-map-support\\\').then((r) = r.default.install())     ^^^^^ SyntaxError: Unexpected reserved word  查看一下node版本  报错原因是node版本的问题。要使用16之上的版本 我的电脑安装了nvm可以查看目前已有的node版本。不会安装nvm的参考这个

    2024年02月15日
    浏览(46)
  • Vue3 slot插槽多层传递

    如果你想传递一个slot,从爷到孙的传递, 看了网上的一些方案,依赖注入都来了,其实没那么麻烦 最顶层组件,插入一个按钮到 slot name为 btn的 插槽里面,Button接收一个row的参数,参数可能有多个,这里 用了 { row } 只取 row 在中间组件,这里把插入一个 插槽 插入到 slot n

    2024年02月15日
    浏览(42)
  • vue naive ui 按钮绑定按键

    知识点: 按键绑定Button 全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效 UMD方式使用vue 与 naive ui 将vue默认的 分隔符大括号 替换 为 [[ ]] https://juejin.cn/post/7188032240775856185 https://www.naiveui.com/zh-CN/os-theme/components/discrete

    2024年02月10日
    浏览(41)
  • 【Vue3 第十九章】插槽 slot

    数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。这就用到了插槽。 插槽是子组件中的提供给父组件使用的一个占位符,用 slot 表示,父组件可以

    2024年02月09日
    浏览(40)
  • vue3 slot 插槽 在h函数中如何使用

    vue3已经出了有一段时间了,越来越多的小伙伴开始用vue3来写项目。开发过程中难免会用到h函数, 有时候会使用h函数封装一些组件,封装组件又会用到插槽。所以呢对于在h函数中如何使用插槽稍作了整理,希望能帮到帮接触h函数的小伙伴。 这里只讲解插槽的用法,不涉及

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包