谈谈uniapp全局公共组件的存放位置和使用方法

1. uniapp全局公共组件的存放位置

在uniapp中,全局公共组件的存放位置一般是在/components文件夹中,这样可以方便其他组件和页面引用和调用。常见的全局公共组件有头部导航栏、底部Tab栏、弹出框等。

/components文件夹中,可以按照功能或者模块分文件夹存放,也可以将所有全局公共组件存放在一个文件夹中,取名为common或者global等,以便于管理和维护。

除了存放全局公共组件,/components文件夹中也可以存放局部组件或者业务相关的组件。

2. uniapp全局公共组件的使用方法

2.1 引入全局公共组件

在页面或者组件中引入全局公共组件的方法非常简单,只需要在需要使用的页面或者组件的.vue文件中加入以下代码即可:

import 全局公共组件名 from '@/components/全局公共组件路径'

其中,全局公共组件名是在全局公共组件中导出的组件名,全局公共组件路径是全局公共组件所在的路径。

2.2 注册全局公共组件

引入全局公共组件后,还需要在App.vue或者main.js中注册全局公共组件,注册的方法如下:

Vue.component('全局公共组件名', 全局公共组件名)

其中,第一个参数全局公共组件名是在import中导入的组件名,第二个参数全局公共组件名也是导入的组件名,但是需要加上.default,这样才能正确注册全局组件。

2.3 使用全局公共组件

完成全局公共组件的引入和注册后,就可以在页面或者组件中使用全局公共组件了,使用的方法非常简单,只需要将组件名称以标签的形式引入即可:

<template>

<全局公共组件名></全局公共组件名>

</template>

这样就可以在当前页面或者组件中使用全局公共组件了。

2.4 全局配置

除了以上介绍的使用方法外,在uniapp中还可以使用全局配置的方式来使用全局公共组件,这样可以为每个项目设置默认值,省去了在每个页面或者组件中单独引入和注册的步骤。

全局配置的方法如下:

Vue.mixin({

components: {

全局公共组件名: 全局公共组件名

}

})

将以上代码放在App.vue或者main.js中即可。

3. uniapp全局公共组件使用注意事项

3.1 全局公共组件名不可与uniapp内置组件名重复

在使用全局公共组件时,需要注意全局公共组件名不要与uniapp内置组件名重复,否则会出现奇怪的错误。

3.2 全局公共组件不支持$emit方法

在使用全局公共组件时,需要注意全局公共组件不支持$emit方法,因此无法像局部组件一样直接通过$emit触发事件,需要在组件内部通过this.$parent.$emit方法触发事件。

3.3 修改全局公共组件样式时需要注意作用域

在修改全局公共组件样式时,需要注意修改样式的作用域,否则会影响所有使用该组件的页面或者组件,应该通过scoped或者deep等方式来限制样式的作用域。

4. 总结

在uniapp中,全局公共组件的存放位置一般是在/components文件夹中,使用方法需要先引入组件,然后注册组件,最后使用组件。使用全局公共组件还需要注意组件名不可与uniapp内置组件名重复、$emit方法不支持以及修改样式时需要注意作用域等问题。使用全局公共组件可以提高代码的复用率,降低开发难度,推荐在项目中大量使用。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。撸码网站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。