组件:组成页面的零件
使用场景:复用性,利用参数实现差异变化
用法: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>
运行效果如图: