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
方法不支持以及修改样式时需要注意作用域等问题。使用全局公共组件可以提高代码的复用率,降低开发难度,推荐在项目中大量使用。