uni-app 组件的使用

组件的使用步骤
1. 定义组件
2. 引入组件
3. 注册组件
4. 使用组件

定义组件
1. src目录下新建文件夹 components，用来存放组件
2. components目录下直接新建组件 *.vue

引入组件
- 在页面中引入组件 "import 组件名 from '组件路径'"

注册组件
- 页面的实例中新增属性components
- 属性components是一个对象，将组件放进去注册

使用组件
- 页面的标签中直接使用引入的组件 "<组件> </组件>"

src\components
 |_ img-border.vue (第一步：定义组件 img-border.vue)

<template>
	<img class="img-border" src="xx.png"/>
</template>

<script>
	export default {
		
	}
</script>

<style>
	.img-border {
		border-radius: 50%;
	}
</style>

index.vue 引入组件img-border.vue

<template>
	<view class="content">
		# 第四步：使用组件
		<imgBorder/> //uni-app不推荐驼峰写法
		
		<img-border/> //uni-app 推荐写法。问题：为何还要定义imgBorder？
	</view>
</template>

<script>
	# 第二步：引入自定义组件 (@等同于src目录)
	import imgBorder from "@/components/img-border"; (imgBorder不能是img-border，编译器会将'-'视为减号)
	export default {
		# 第三步：注册组件
		components: {
			imgBorder: imgBorder // 属性名：属性值 （写法1）
			
			imgBorder // 属性名与属性值相同时，属性值可省略 （写法2）
		}
	}
</script>