uni-app中利用eacycom机制快速创建复用组件

 组件：组成页面的零件

使用场景：复用性，利用参数实现差异变化

用法：uni-app具有eacycom机制，组件必须放在components文件夹下，就可以直接全局使用，而无需提前注册

1.创建components文件夹

右键components文件夹会跳出 新建组件 选项：

不同于一般文件夹：

2.创建组件

记得勾选"创建同名目录"：(为了满足eacycom机制)

3.应用举例

在components文件夹下创建了组件hello，在hello.vue文件中编写组件代码，其功能是接收传入的参数并以固定模式显示在屏幕上

//components/hello/hello.vue
<template>
	<view>
		<h2 :style="{ color: color }">Hello, {{ name }}</h2>
	</view>
</template>

<script>
export default {
	//props: 接收通过属性传入的值，例如<hello name='bro!' color='green' />
	props: ['name', 'color'],
	name: 'hello',
	data() {
		return {};
	}
};
</script>

<style></style>

 然后在pages文件夹中的index.vue中使用刚刚创建的hello组件：

//pages/index/index.vue
<template>
	<view>
		<view><hello name="bro" color="green" /></view>
		<view><hello name="giegie" color="red" /></view>
		<view><hello name="xiaoheizi" color="black" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style></style>

运行效果如图：