uniapp component-全局引用和局部引用

局部引用组件

<template>
	//3、template中调用
	<uniNavBar>
	</uniNavBar>
</template>

//1、import 需要的组件
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

exprot default {
	//2、compoents中注册
	components:{
		uniNavBar
	}
}

全局引用

新建一个globalComponents.js文件如下：

//引入组件
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
//定义函数
function plugin (Vue) {
	//注册组件
	Vue.component('glNavBar',uniNavBar)
}

导出函数
export default plugin

在main.js中写入代码如下：

import glCompoents from '@/utils/globalComponents.js'
Vue.use(glCompoents)

然后就能在template中使用

<template>
	<glNavBar></glNavBar>
</template>