This page is translated by Google Cloud Translation API

Switch to Chinese

In traditional vue project development, referencing components requires import-registration-use three steps, as follows:

<template>
	<view>
		<!-- 3. Use components -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. Import component
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>

Vue 3.x adds the script setup feature, which optimizes three steps into two steps, without registration steps, and is more concise:

<template>
	<view>
		<!-- 2. Use components -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. Import component
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

The easycom mechanism of uni-app further optimizes the reference of components, and developers can just use it without considering import and registration, which is more efficient:

<template>
	<view>
		<!-- 1. Use components -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
</script>

In the uni-app project, the page reference component and the component reference component are the same way (it can be understood as: page is a special component), both support direct reference through easycom.

easycom 规范详细介绍，参考：easycom