uni-app微信小程序爬坑-父组件给子组件传值并绑定到子组件：style以及图片路径问题

前言

uni-app开发小程序油时候兼容性真的是千奇百怪

今天自己封装了一个无信息占位组件，组件源代码如下：
第一个问题请看注释

<template>
    <view class="no-tips flex-c-c">
        <image :src="imgSrc" :style="[imgStyle]"></image>
        //这里的imgStyle传过来的是一个对象，如果是这样用：
        //<image :src="imgSrc" :style="imgStyle"></image>
        //H5生效，小程序不生效，查看调试器，渲染的是这样的：style=[object,Object],
        //套上数组括号[]就解决这个问题了
        <text>{{tipsWord}}</text>
    </view>
</template>
<script>
    export default{
        props:{
                imgStyle:{
                    type:Object,
                    defualt:{}
                },
                tipsWord:{
                    type:String,
                    defualt:'暂无数据'
                },
                imgSrc:{
                    type:String,
                    defualt:'../static/img/common/no_tips.png'
                }
                
        },
        data(){
            return{
                
                
            }
        },
    }
</script>

<style lang="less" scoped>
    .no-tips{
        height: 60vh;
        image{
            width:300rpx ;
            height: 300rpx;
        }
    }
</style>

组件引用并传值：

//我已经全局挂载了组件，无需引入
<noTips 
tipsWord='暂无收藏' 
:imgSrc="require('../../static/img/userCenter/icon_nocollect.png')" 
:imgStyle="{width:'280rpx',height:'232rpx'}"
></noTips>

第二个问题子组件获取图片路径问题
传入图片的途径在H5端和小程序端不一样；
微信小程序端是根据组件的的目录来，H5是根据引用组件的目录来
一开始我这样用导致了两端不兼容：

:imgSrc="'../../static/img/userCenter/icon_nocollect.png'" 
调试器查看路径：
h5:'../../static/img/common/no_tips.png'
微信小程序:'../static/img/common/no_tips.png'

导致了两端只有一端能显示
然后改成这样就行了：

:imgSrc="require('../../static/img/userCenter/icon_nocollect.png')" 

有时候觉得是坑，其实是我们没有好好去看官方文档；

以下是uni-app官方说法： uni-app官网说明：Class 与 Style 绑定
Class 与 Style 绑定
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果如下：

class 支持的语法:

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支持的语法:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>