uniapp 组件注册使用

局部组件注册使用

<template>
  <view>
    <EmptyData/>
  </view>
</template>

<script>

import emptyData from '@/components/emptyData.vue'

全局组件注册

自定义全局组件，需要在 main.js 中注册，比如我们定义一个没有数据时候的组件 emptyData.vue

在 main.js 中注册组件

import Vue from 'vue'
import emptyData from '@/components/emptyData.vue'
Vue.component('EmptyData', emptyData)

全局组件注册后，在页面中使用

<template>
  <view>
    <EmptyData/>
  </view>
</template>

vue3项目中使用全局组件

这里我们就把上面的组件在我们项目之中进行使用，官方给我们默认提供的部分是这样子的

import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif

引入并且注册我们的组件,还可以继续优化抽离组件部分

import App from './App'
import emptyData from '@/components/emptyData.vue'

// 注册组件
const registerGlobalComponents = (Vue) => {
  Vue.component('EmptyData', emptyData)
}

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'

registerGlobalComponents(app)// Vue 3 中注册组件
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	registerGlobalComponents(app)// Vue 3 中注册组件
	return {
		app
	}
}
// #endif