uniapp运行到小程序Vue.use注册全局组件不起作用

真想吐槽一下小程序,uniapp运行到小程序使用Vue.use注册全局组件根本不起作用,也不报错,这只是其中一个问题,其他还有很多问题,比如vue中正常使用的没问题的语法,运行到小程序就不行,又是包太大也不让上传等等乱七八糟的问题。uniapp相对于小程序算是好点儿,但是uniapp的开发体验也真是糟糕,HBuilderX不好用,另外uniapp官方提供的内置的组件、api等感觉写的也不够直观明了、跟它搭配使用的u-view、uCharts等组件库跟的跟element-ui没法比。相信做过vue的没人愿意去搞这个uniapp。现在的app比较广泛普遍的、进入大众的移动端应用基本没有是用uniapp开发的,一般面向企业的app使用uniapp开发还是比较快的,且能发布到H5、微信小程序、支付宝小程序、app、百度小程序等等。也算是可以了。

稍微吐槽了一下~~~~~~~~~

然后进入正题,这个也很简单,大家知道就行。

在开发中,正常引入组件并注册使用是没问题

<template><view class="container"><view>我是父组件</view><CustomComp /></view>
</template>
<script>
import CustomComp from '@/components/CustomComp.vue'export default {data() {return {}},components: { CustomComp }}
</script>
<style scoped>.container {width: 100%;height: 100%;}
</style>

在main.js中引入,使用Vue.component注册全局组件也没问题,组件内可以正常使用的

import App from './App'
import Vue from 'vue'
import store from './store/index.js'
import uView from '@/uni_modules/uview-ui'
import CustomComp from '@/components/CustomComp'Vue.use(uView);
Vue.component('CustomComp', CustomComp)Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App,store
})
app.$mount()

使用Vue.use注册全局组件,运行到微信小程序不起作用 

相信大家都知道,vue中的Vue.use方法实际上是调用对象中的install方法、并将Vue实例传递到install方法中。当然如果是个函数的话,会直接调用该函数、同样会将Vue实例传递过去。但是在uniapp中使用Vue.use注册全局组件的时候,运行浏览器(H5)是没问题的,但是运行到微信小程序的时候不起作用!!!运行到支付宝等其他小程序没验证,估计也不行,大家可自行验证。如下:

main.js

import App from './App'
import Vue from 'vue'
import store from './store/index.js'
import uView from '@/uni_modules/uview-ui'
import plugins from '@/plugins'Vue.use(uView);
Vue.use(plugins)Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App,store
})
app.$mount()

plugins/index.js

import useGlobalComp from './useGlobalComp'export default {install(Vue) {useGlobalComp(Vue)}
}

 useGlobalComp.js

import CustomComp from '@/components/CustomComp'const comps = [{name: 'CustomComp',comp: CustomComp
}]export default function(Vue) {for(let item of comps) {Vue.component(item.name, item.comp)}
}

就上面这种写法不起作用运行到浏览器正常使用,运行到小程序不起作用。

那么如何解决这种问题呢?

第一:我们肯定要避免这种写法,而且我印象用小程序不支持component动态加载组件:什么是动态组件?如下:

<template><view class="container"><view>我是父组件</view><component :is="cname"></component><wft-custom-comp /></view>
</template>
<script>export default {data() {return {cname: 'wft-custom-comp'}}}
</script>
<style scoped>.container {width: 100%;height: 100%;}
</style>

就是使用component :is 使用变量 这种小程序也不支持!!!运行到浏览器、app都是没问题的 。

我们可以使用就像我上面说的Vue.component来注册全局组件

还有一种就是在pages.json中配置:如下:

"^wft-(.*)": "@/components/wft-$1.vue"

 

这种写法就要求我们改一下组件名字,我上面写的就是以wft-开头的组件。

它的作用是定义一个通用的导入规则,以便在项目中引用以 "wft-" 开头的组件。

这个配置使用了正则表达式 ^wft-(.*),其中 ^ 表示字符串的开头,wft- 是你要匹配的字符串开头部分,(.*) 是一个捕获组,用于捕获 "wft-" 之后的任何字符。

当你在项目中引用一个以 "wft-" 开头的组件时,例如 import WftComponent from 'wft-example';,UniApp 会根据这个配置自动将导入路径映射到 @/components/wft-example/index.vue

这样,你就可以方便地在项目中引入和使用这些组件,而无需手动编写每个组件的导入路径。

这样配置之后,只要组件满足上面的目录和名称要求,就会自动去找对应的组件,直接使用就可以,不需要我们引入注册,跟全局注册了组件差不多这么理解,使用如下:

 

下面是项目目录:

 

这篇就这么多~~~~~~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python机器学习】自动化特征选择——单变量统计

添加更多特征会使所有的模型变得更加复杂&#xff0c;从而增大过拟合的可能性。 在添加新特征或处理一般的高位数据集时&#xff0c;最好将特征的数量减少到只包含最有用的那些特征&#xff0c;并删除其余特征&#xff0c;这样会得到泛化能力更好、更简单的模型。 对于如何判…

生成式人工智能和机器人技术是否即将取得最后的突破?

了解生成式人工智能与机器人技术的融合如何彻底改变从医疗保健到娱乐等行业 想象一下这样一个世界&#xff0c;机器人可以谱写交响乐、画出杰作、写出小说。这种创造力与自动化的迷人融合&#xff0c;由 生成式人工智能&#xff0c;不再是梦想&#xff1b;它正在以重大方式重塑…

1Panel开源面板项目GitHub Star数量突破20,000!

截至2024年6月25日9:00&#xff0c;FIT2CLOUD飞致云旗下开源项目——1Panel开源Linux服务器运维管理面板GitHub Star数超过20,000个&#xff01; 继Halo和JumpServer之后&#xff0c;1Panel成为飞致云旗下第三个GitHub Star数量超过20,000个的开源项目&#xff0c;也是飞致云旗…

Python 类

文章目录 定义类与对象成员方法构造方法魔术方法私有成员继承复写父类成员调用父类成员 多态 定义 class 类名:成员变量成员方法变量类名()# 创建对象 变量.成员变量# 使用成员变量 变量.成员方法类与对象 类相当于设计图纸&#xff0c;规定了各种属性与行为。 对象也就是按照…

(单机架设教程)3D剑踪

前言 今天给大家带来一款单机游戏的架设&#xff1a;3D剑踪 如今市面上的资源参差不齐&#xff0c;大部分的都不能运行&#xff0c;本人亲自测试&#xff0c;运行视频如下&#xff1a; 3D剑踪 搭建教程 此游戏架设不需要虚拟机&#xff0c; 我们先解压 “3D剑踪.zip” &…

【Python】pycharm常用快捷键操作

目录 一.pycharm自定义修改快捷键 二.pycharm默认常用快捷键 一.pycharm自定义修改快捷键 在file-setting-keymap中可以修改快捷键&#xff0c;建议刚开始没特殊需求就不用修改&#xff0c;先熟悉系统默认的常用快捷键&#xff0c;但是以下情况可以考虑修改: 之前使用其他I…

因果解耦表征 | (香港理工ICLR24)联合学习个性化因果不变表示以应对异构联邦客户端

原文&#xff1a;Learning Personalized Causally Invariant Representations for Heterogeneous Federated Clients 地址&#xff1a;https://openreview.net/forum?id8FHWkY0SwF 代码&#xff1a;未知 出版&#xff1a;ICLR 2024 机构: 香港理工大学、香港科技大学 解读&…

JAVA期末速成库(12)第十三章

一、习题介绍 第十三章 Check Point&#xff1a;P501 13.3&#xff0c;13.17&#xff0c;13.28&#xff0c;13.29 Programming Exercise&#xff1a;13.1&#xff0c;13.6&#xff0c;13.11 二、习题及答案 Check Point&#xff1a; 13.3 True or false? a. An abst…

Nature Climate Change | 中国科学院地理资源所吴朝阳课题组发表生物多样性调控植被物候的研究成果!

本文首发于“生态学者”微信公众号&#xff01; 植被春季物候对气候变化的响应通常是通过测量其温度敏感性&#xff08;ST&#xff0c;温度每升高1度&#xff0c;植被提前展叶的天数&#xff09;来量化。ST是植被在当地历史气候环境的选择压力下演化形成的最优策略&#xff0c;…

第一百三十四节 Java数据类型教程 - Java int数据类型

Java数据类型教程 - Java int数据类型 int数据类型是32位有符号Java原语数据类型。 int数据类型的变量需要32位内存。 其有效范围为-2,147,483,648至2,147,483,647&#xff08;-231至231 - 1&#xff09;。 此范围中的所有整数称为整数字面量。 例如&#xff0c;10&#xf…

Eclipse 悬浮提示:提升编程效率的利器

Eclipse 悬浮提示:提升编程效率的利器 引言 对于广大开发者而言,Eclipse 是一款功能强大的集成开发环境(IDE)。它不仅支持多种编程语言,还提供了丰富的插件和工具,以帮助开发者提高编程效率和代码质量。在本文中,我们将重点探讨 Eclipse 中的一个实用功能——悬浮提示…

刷算法Leetcode---7(二叉树篇)(前中后序遍历)

前言 本文是跟着代码随想录的栈与队列顺序进行刷题并编写的 代码随想录 好久没刷算法了&#xff0c;最近又开始继续刷&#xff0c;果然还是要坚持。 二叉树的题目比之前多了好多&#xff0c;就多分几次写啦~ 这是力扣刷算法的其他文章链接&#xff1a;刷算法Leetcode文章汇总 …

PyTorch读写模型(state_dict、torch.save、torch.load)

1. state_dict 在PyTorch中&#xff0c;state_dict 是一个简单的python的字典对象&#xff0c;将每一层与它的对应参数建立映射关系。(如model的每一层的weights及bias等) 首先&#xff0c;我们来定义一个MLP模型&#xff1a; import torch.nn as nnclass MLP(nn.Module):de…

494. 目标和 Medium

给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 &#xff0c;在 1 之前添加 - &#xff0c;然…

使用Calendar.add进行日期计算

使用Calendar.add进行日期计算 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Java中如何使用Calendar.add方法进行日期计算。Calendar类是…

如何在Ubuntu20上离线安装joern(包括sbt和scala)

在Ubuntu 20上离线安装Joern&#xff0c;由于Joern通常需要通过互联网从其官方源或GitHub等地方下载&#xff0c;但在离线环境中&#xff0c;我们需要通过一些额外的步骤来准备和安装。&#xff08;本人水平有限&#xff0c;希望得到大家的指正&#xff09; 我们首先要做的就是…

在QGIS中调用天地图

2019年 1月 1日起&#xff0c;天地图 API及服务接口调用需要获得开发授权&#xff0c;之前使用 QGIS等 GIS软件无法继续调用天地图&#xff0c;这就需要申请一个许可。 一、注册并申请 Key 具体申请可以登录如下地址&#xff1a;https://www.tianditu.gov.cn打开上述网址后点…

速盾:cdn加速哪个好?

在现代互联网时代&#xff0c;网站的速度和稳定性是非常重要的。为了提供最佳的用户体验&#xff0c;许多网站和应用程序都使用CDN&#xff08;内容分发网络&#xff09;来加速其内容的传输。CDN是由位于全球各地的分布式服务器组成的网络&#xff0c;其目的是将内容尽可能快地…

工厂方法模式:概念与应用

目录 工厂方法模式工厂方法模式结构工厂方法适合的应用场景工厂方法模式的优缺点练手题目题目描述输入描述输出描述**提示信息**解题&#xff1a; 工厂方法模式 工厂方法模式是一种创建型设计模式&#xff0c; 其在父类中提供一个创建对象的方法&#xff0c; 允许子类决定实例…

SQLite3的使用

14_SQLite3 SQLite3是一个嵌入式数据库系统&#xff0c;它的数据库就是一个文件。SQLite3不需要一个单独的服务器进程或操作系统&#xff0c;不需要配置&#xff0c;这意味着不需要安装或管理&#xff0c;所有的维护都来自于SQLite3软件本身。 安装步骤 在Linux上安装SQLite…