# 6、页面组件复用
审批应用在宽屏和窄屏时,有些局部界面是一样的,这里很多都是复用了一套代码的,比如如下场景:
宽屏侧边栏 | 窄屏页面 |
---|---|
![]() | ![]() |
宽屏这个场景的「侧边栏表单」内部的元素布局甚至业务逻辑 与窄屏的「审批表单页」都是一样的,但宽屏的这个位置是首页的一个局部元素,而窄屏这里是整个页面。
总而言之,一个是组件,一个是页面。
根据页面和组件的生命周期来分析,如果该通用部分无需 props 参数, 完全可以将该页面作为组件进行使用。
在需要使用的页面引入,注册即可。
import approvalFormPage from '@/pages/approval-form/index.vue'
export default {
components: {
approvalFormPage
},
...
}
1
2
3
4
5
6
7
2
3
4
5
6
7
但审批这个通用部分,需要参数,窄屏页面是通过路由传参获取的, 由 onLoad
生命周期透出
onLoad: function(options) {
// 页面创建时执行,options 页面参数 Object
},
1
2
3
2
3
宽屏组件则是需要通过 组件的 props 传参获取,组件内部通过 this
获取,
props: {
option: Object,
default: () =>({})
},
1
2
3
4
2
3
4
该“页面组件”需要复用话,就需要结合两者的传参方式
<script>
/**
* XXX pc 组件;移动端页面
*/
export default {
props: {
option: Object,
default: () =>({})
},
data() {
return {
isPage: false,
params: {},
}
},
methods: {
// 处理逻辑完成后
handleConfirm() {
if (this.isPage) {
// 回到上个页面
bz.navigateBack()
} else {
// 触发完成钩子,实际逻辑由外部写(例如关闭侧边栏
this.$emit('onFinish')
}
},
// 初始化方法
onInitCom(option) {
this.params = option
}
},
// PC 弹窗入口
created() {
if (!this.isPage) {
this.onInitCom(this.option) // this.option 是 props 参数
}
},
// 移动端页面入口
onLoad(option) {
this.isPage = true
this.onInitCom(option) // option 是 页面 参数
}
}
</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
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
如此,通过页面配置的方式,在窄屏幕打开的就是页面,会走 onLoad 方法;
宽屏首页的侧边栏组件导入该组件,就是组件,通过。不同入口形式,统一初始化方法 onInitCom
。
大部分的页面组件复用都可以套用该方式。