uni-app自定义组件components导入失败或页面不显示文本等

这篇具有很好参考价值的文章主要介绍了uni-app自定义组件components导入失败或页面不显示文本等。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、排查问题

        一般来说分三步走,如下图

uniapp引入组件报错,uni-app,vue.js,前端

 如果引入不成功则考虑以下几个问题:

  • 是 components 而非 component
  • 导入后的命名方式采用驼峰命名法
  • 检查需要引入的文件路径和文件名是否正确

 二、第二种方法

如果还有问题,则采用第二种方式直接在 components 中引入、注册一体,引入直接使用 changeLib 即可。如下示例:

components: {
	"changeLib": () => import('../../pages/profile/changeLib.vue')
},

三、其他问题

components 引入的文件作为子组件,其加载的有些生命周期不会执行,如果页面有需要预加载数据的,建议放在 created 中进行接口数据请求,而不是使用 onLoad、onReady 等钩子。关于这一点本人已经深有体会。

1、使用onLoad 、onReady 钩子请求数据时,页面无数据

uniapp引入组件报错,uni-app,vue.js,前端

 network面板无接口数据记录

uniapp引入组件报错,uni-app,vue.js,前端

console面板无打印记录

uniapp引入组件报错,uni-app,vue.js,前端

 2、使用 created 时,console 面板和 network 面板均出现数据

uniapp引入组件报错,uni-app,vue.js,前端

 uniapp引入组件报错,uni-app,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-604069.html

到了这里,关于uni-app自定义组件components导入失败或页面不显示文本等的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • [uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)

    切换了个路径下的组件, 导入失败, 尝试了清缓存重启删项目等一些列操作均无效 上面两个路径中, 都存在一模一样的 videItem.vue Main 路径是可以导入的 Main 路径是无法导入的 后来发现, 是 分包 的问题导致. 我们先来假设一个场景,如果小程序进行了分包操作, 其中有个公共组

    2024年02月16日
    浏览(55)
  • uni-app nvue页面中使用video视频播放组件

    我遇到的问题是,在nvue页面引用video组件,然后啥也没显示的,显示了无法控制播放,折腾了好久,在这里记录下来!希望可以帮助到需要的人 我的代码是这样的(src换成官方的举例)  问题1:视频页面一片空白,后来去查官方文档是这样说的 我以为按照官方提示勾选 ma

    2024年02月03日
    浏览(45)
  • 前端vue uni-app自定义精美海报生成组件

    在当前技术飞速发展的时代,软件开发的复杂度也在不断提高。传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况。为了解决这个问题,组件化开发逐渐成为了一种趋势。通过组件

    2024年02月14日
    浏览(63)
  • uni-app小程序父组件数据更新,实现自定义组件刷新视图

    之前错误的思路 新思路(忽略我的参数命名,写文章的时候方便。)

    2024年02月16日
    浏览(51)
  • uni-app中监听网络状态,并在嵌入webView页面的组件中添加网络监测

    下载插件 打开网络异常组件页面,点击\\\"下载插件并导入HBuilderX\\\"按钮,打开HBuilderX软件后,选择需要导入插件的项目,点击“确定即可”。 使用插件 pages/network/index页面,仿照微信。 效果展示 修改网络监测组件mz-network-error 当网络状态发生变化时emit相关事件 修改组件调用

    2024年02月12日
    浏览(50)
  • uni-app编译成钉钉小程序,uViewUI组件样式失效,自定义组件样式失效

    公司项目需要把原本用 uinapp 开发的微信小程序想要在钉钉上也能使用,然后就打算用uniapp编译成钉钉小程序,看看是否有坑,不试不知道,一试吓一跳,官方没有提供钉钉的编译方式,按照网上文章的配置编译成钉钉小程序后,初步发现, uView-ui的icon没啦 ,然后样式和布局

    2024年02月11日
    浏览(57)
  • uni-app 使用v-model封装picker组件和自定义样式

    1、v-model封装picker组件 (1)封装组件myPicker.vue (2)组件调用 (3)属性说明 属性名 类型 默认值 说明 options Object 数据选项,默认[{ name: \\\"办公\\\", value: \\\"1\\\" }]格式 rangeKey String label 数据选项的属性名 rangeValue String value 数据选项的属性值 placeholoder String 请选择 未选择数据时的默认

    2024年02月09日
    浏览(55)
  • [uni-app] web-view组件页面添加u-navbar, u-navbar无法显示问题处理

    uni-app 内部调整H5页面 (webview组件),需要条件导航问题 在iOS/Android下, web-view占满了全屏, 此时添加一个 u-navbar/ 在手机端不会显示, 处理办法 javascript部分: html部分:

    2024年02月11日
    浏览(45)
  • uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!

    pages.json  上面可以看到tabbar我使用的原生的,但是值配置了pagepath,并且page里三个首页都可以自定义顶部导航栏,当然如果删掉custom那一行代码,就切换成原生顶部导航栏了。 下面拿一个首页作为代码演示:(顶部自定义导航栏组件和底部导航栏组件会放在最后) 下图组件

    2023年04月09日
    浏览(89)
  • 【uni-app】uni-app实现聊天页面功能——功能篇(上)

    上一篇讲到了如何布局,这一篇将讲一下如何用uni-app实现小程序聊天页面的最主要的功能——发消息后页面滚动到最底部(参考过很多文章最后找到比较适合的方法)。 其他的功能(参考微信),之后的文章会讲述到具体实现方法 点击聊天框的时候,聊天框随键盘抬起且聊

    2024年02月11日
    浏览(67)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包