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

 更新时间:2023年08月17日 11:33:15   作者:奈何-1912*  
这篇文章主要给大家介绍了关于uni-app自定义组件components导入失败或页面不显示文本等的解决方法,众所周知Uni-app支持使用自定义组件,文中通过图文介绍的非常详细,需要的朋友可以参考下

一、排查问题

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

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

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

二、第二种方法

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

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

三、其他问题

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

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

 network面板无接口数据记录

console面板无打印记录

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

总结 

到此这篇关于uni-app自定义组件components导入失败或页面不显示文本等解决方法的文章就介绍到这了,更多相关uni-app components导入失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript中Date类型和Math类型详解

    Javascript中Date类型和Math类型详解

    这篇文章主要给大家介绍了Javascript中Date类型和Math类型的一些基础知识,非常的实用,有需要的小伙伴可以参考下
    2016-02-02
  • javascript this详细介绍

    javascript this详细介绍

    这篇文章主要介绍了javascript this详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript 学习笔记(十二) dom

    JavaScript 学习笔记(十二) dom

    新的一章的学习----Dom,重点啊
    2010-01-01
  • JavaScript基础之this详解

    JavaScript基础之this详解

    JavaScript中函数的this对象是函数在执行时所处的作用域(例:当在网页的全局作用域中调用函数时,this对象引用的就是window)。
    2017-06-06
  • JavaScript入门之基本函数详解

    JavaScript入门之基本函数详解

    函数,在C语言之类的过程式语言中,是顶级的实体,而在Java/C++之类的面向对象的语言中,则被对象包装起来,一般称为对象的方法。而在JavaScript中,函数本身与其他任何的内置对象在低位上是没有任何区别的,也就是说,函数本身也是对象
    2011-10-10
  • ES6基础语法之对象介绍

    ES6基础语法之对象介绍

    这篇文章介绍了ES6中对象的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • VB倒计时器和JS当前时间

    VB倒计时器和JS当前时间

    VB倒计时器和JS当前时间...
    2006-11-11
  • javascript学习笔记(六)数据类型和JSON格式

    javascript学习笔记(六)数据类型和JSON格式

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。
    2014-10-10
  • 实例讲解JavaScript中的this指向错误解决方法

    实例讲解JavaScript中的this指向错误解决方法

    JavaScript中this指向的处理是令大家普遍头疼的问题,这里我们举一个实例讲解JavaScript中的this指向错误解决方法,需要的朋友可以参考下
    2016-06-06
  • ES6新增关键字let和const介绍

    ES6新增关键字let和const介绍

    这篇文章介绍了ES6新增的关键字let和const,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论