---

一、今日实战目标

• 实现自定义组件

---

二、实战步骤

1. 在components目录下创建组件

• 右键components文件夹会弹出菜单，点击新建组件
  

• 输入组件名，可以把创建同名目录给勾上
  

2. 编辑组件 （多版本）

（1）基础组件 - - （完全静态内容）

// 这种组件的内容是纯静态的，不接受任何动态数据
<template>
	<view class="g-top hor-center">
		<view class="row ">
			<u-tag text="置顶" type="success" plain size="mini" borderColor="#16B998" color="#16B998"></u-tag>
			<view class="label text-overflow text-overflow1">
				纯享版-想阅读致敬！微信读书产品设计策略alkjhfkahfj
			</view>
		</view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11

（2）进阶组件 - - （动态内容、样式等）

// 利用props接收数据，$emit发送事件

**** 子组件 ******
<template>
	<view class="setting-bar" v-if="info">
		<view class="space-between hor-center" @click="go(info)">
			<view class="row hor-center">
				<image class="icon" :src="info.icon" mode=""></image>
				<view class="menu">
					{{info.title}}
				</view>
			</view>
			<view class="row">
				<view v-if="info.showNumber" class="label">
					1
				</view>
				<image class="arrow" src="../../static/svg/arrowR.svg" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "setting-bar",
		data() {
			return {

			};
		},
		// props接受数据
		props: {
			info: Object
		},
		methods: {
		// 向父组件发送事件
			send() {
				this.$emit("send")
			},
			go(e) {
				if (e.id === 4) {
					this.$store.commit("logout")
				}
				uni.navigateTo({
					url: e.page
				})
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

• 在父组件中使用子组件

// 先引入你写的子组件,
import xxx from '@/components/setting-bar/xxx.vue'

export default {
		components: {
			xxx
		},
		data() {
			return {
				list: [{
					id: 4,
					icon: '../../static/svg/change.svg',
					title: '切换账号',
					page: '../login/login',
					showNumber: false
				}, {
					id: 5,
					icon: '../../static/svg/kefu.svg',
					title: '帮助与客服',
					page: '../../login/login',
					showNumber: false
				}]
}

// 遍历list
<view class="" v-for="(item,index) in list" :key="index">
			<xxx :info="item" />
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

（3）高级组件 （mixins）

• 举例自定义顶部导航栏

// props.js
export default {
	props: {
		// 是否开启顶部安全区适配
		safeAreaInsetTop: {
			type: Boolean,
			default: uni.$u.props.navbar.safeAreaInsetTop
		},
		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
		placeholder: {
			type: Boolean,
			default: uni.$u.props.navbar.placeholder
		},
		// 是否固定在顶部
		fixed: {
			type: Boolean,
			default: uni.$u.props.navbar.fixed
		},
		// 是否显示下边框
		border: {
			type: Boolean,
			default: uni.$u.props.navbar.border
		},
		// 左边的图标
		leftIcon: {
			type: String,
			default: uni.$u.props.navbar.leftIcon
		},
		// 左边的提示文字
		leftText: {
			type: String,
			default: uni.$u.props.navbar.leftText
		},
		// 左右的提示文字
		rightText: {
			type: String,
			default: uni.$u.props.navbar.rightText
		},
		// 右边的图标
		rightIcon: {
			type: String,
			default: uni.$u.props.navbar.rightIcon
		},
		// 标题
		title: {
			type: [String, Number],
			default: uni.$u.props.navbar.title
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: uni.$u.props.navbar.bgColor
		},
		// 标题的宽度
		titleWidth: {
			type: [String, Number],
			default: uni.$u.props.navbar.titleWidth
		},
		// 导航栏高度
		height: {
			type: [String, Number],
			default: uni.$u.props.navbar.height
		},
		// 左侧返回图标的大小
		leftIconSize: {
			type: [String, Number],
			default: uni.$u.props.navbar.leftIconSize
		},
		// 左侧返回图标的颜色
		leftIconColor: {
			type: String,
			default: uni.$u.props.navbar.leftIconColor
		},
		// 点击左侧区域(返回图标)，是否自动返回上一页
		autoBack: {
			type: Boolean,
			default: uni.$u.props.navbar.autoBack
		},
		// 标题的样式，对象或字符串
		titleStyle: {
			type: [String, Object],
			default: uni.$u.props.navbar.titleStyle
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

// u-navbar.vue








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

---

总结

在项目中，可复用的一些模块，尽量写成组件，能提高开发效率和方便后期维护更新，上午讲到的（3）高级组件类似于在uniapp插件市场的ui组件库封装格式，熟练了进阶组件就可以多研究下类似的高级组件。