uniapp 微信小程序 子组件行内样式通过父组件参数获取

uniapp中正常按vue写法没问题,但是编译成微信小程序时,style中会变成[object object],如下图

 子组件可以通过计算属性处理一下传进来的style对象,代码如下

<template>
    <div>
        <div>我是自定义组件</div>
        <div :style="generateStyle">00{{tips}}</div>
    </div>
</template>

<script>
    export default {
      props: {
        tips: {
          type: String,
          default: '搜索商品'
        },
            mystyle: {
                type: Object,
                default: {"color":"red"}
            }
      },
      data() {
        return {
                
            }
      },
    
      methods: {
            
      },
        computed:{
            generateStyle() {
                const styles = this.mystyle;  
                return Object.keys(styles).map(key => `${key}: ${styles[key]};`).join(' ');  
            } 
        }
    }
</script>

<style>
</style>