uni-app：封装组件

Posted 2022-03-01 wuwuFQ

Vue封装组件
根据官方文档来做其实很简单，我这里记录一下注意点。

通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合
components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

找到 components 目录，在下面创建你的组件目录和组件vue，要名称一致。

注意点：
props 可以是数组或对象，用于接收来自父组件的数据。html 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
也就是说你在封装组件里面的属性是contentText，在传值的时候就是content-text。

这是我封装的空数据占位图，大家可以参考使用。

<template>
	<view class="fq-empty">
		<image src="/static/image/empty-view.png"></image>
		<text class="">emptyText</text>
	</view>
</template>

<script>
	export default 
		props: 
			// 检测类型 + 其他验证
			emptyText: 
				type: String,
				default: '什么都没有',
			
		,
	
</script>

<style>
	.fq-empty 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	

	.fq-empty image 
		width: 300rpx;
		height: 300rpx;
		margin: 30rpx;
	
</style>

使用案例

<!-- 无数据 -->
	<template v-else>
		 <fq-empty empty-text="暂无订单"></fq-empty>
	 </template>