所有页面头部组件封装：组件传值

多个父组件向同一个子组件传值
子组件：

默认背景色

<template>
        <div>
                <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
                        <div :style="'height: '+(system_status_bar_height)+'px; width: 100%;background:'+(background)+' ;'"></div>
                        <div :style="'height: '+(jiaonang_status_bar_height)+'px; width: 100%;background:'+(background)+';display: flex;justify-content: center;align-items: center;'">
                                <!-- <div style="margin-left: 25rpx;">返回</div> -->
                                <div style="font-size: 32rpx;color: #444444;font-weight:500;">{{title}}</div>
                                <image v-if="isShowImage" src="/static/icon/fanhui@2x.png" style="height: 36rpx;width: 22rpx;position: fixed;left: 23rpx;" @click="goBack" ></image>
                        </div>
                        <!-- <div :style="'position: fixed;top: 0;left: 0;z-index: 100;width: 100%;height:'+(system_status_bar_height+jiaonang_status_bar_height)+'px'"></div> -->
                </div>
                <div :style="'height:'+(system_status_bar_height+jiaonang_status_bar_height)+'px;background:#F8F8F8'"></div>
        </div>
</template>
<style>
</style>

默认传订单详情

<script>
    export default {
        props: {
            title: {
                type: [String],
                default:'订单详情' 
            },
            background:{
                type: [String],
                default:'linear-gradient(90deg, #FAB41A, #FCD083)' 
                
            },
            isShowImage:{
                type:[Boolean],
                default:true
            },
            textColor:{
                type:[String],
                default:'#444444'
            },
           image:{
                type:[String],
                default:'/static/icon/fanhui@2x.png'
            }
        },
        data() {
            return {
                system_status_bar_height: 0, //定义设备通知栏高度
                jiaonang_status_bar_height: 0 //定义胶囊那一栏的高度
            };
        },
        methods: {
            //返回上一级
            goBack() {
                uni.navigateBack({
                    delta: 1
                })
            }
        },
        beforeMount() {
            let self = this;
            let system_info = {};
            //获取设备系统信息 为了拿设备头部通知栏高度
            uni.getSystemInfo({
                success(system) {
                    //此方法是微信原生的写法，问我我也不能解释
                    system_info = system;
                    self.system_status_bar_height = system.statusBarHeight;
                }
            });
            // #ifdef MP-WEIXIN 
            //获取胶囊信息,emmm 这个也是微信原生的写法，问我我也不能解释
            let jiaonang_info = uni.getMenuButtonBoundingClientRect();
            //这个为什么这样计算我是上网查的，问我我也不能解释
            this.jiaonang_status_bar_height = jiaonang_info.height + (jiaonang_info.top - system_info.statusBarHeight) * 2;
            // #endif
            // #ifdef APP-PLUS
            this.jiaonang_status_bar_height = 44;
            // #endif
        }
    };
</script>

父组件传值
title=" " 填写任何内容都可以

:isShowImage="false"

<cuCustom title="售后" background="#FFFFFF"></cuCustom>

组件传值（图片）
方法1：如上写死得
方法2：

<image v-if="isGoBackPage" :src="isGoBackPage" style="display: inline-block; height: 36rpx;width: 22rpx;position: fixed;left: 30rpx;"
                 mode="aspectFit" @click="goBackPage"></image>

    export default {
        props: {
           isGoBackPage: {
                type: String,
                default: '/static/icon/fanhui@2x.png'
            },
         }
}

组件中引用

<page-header  textColor="#FFFFFF" isGoBackPage='../../static/icon/back.png'/>