Vue 父组件向子组件动态传style样式

父组件：

DOM部分

 <el-table-column prop="img" :label="label" width="180">
        <template slot-scope="scope">
          <div class="img-wrap">
            <img v-lazy="scope.row.album.picUrl" alt="" />
            <PlayIcon :style="out-style" :inner-size="size"></PlayIcon>
          </div>
        </template>
</el-table-column>

script部分：

import PlayIcon from '@/base/playIcon';  //引入子组件
export default {
  props: ['data'],
  components: {
    PlayIcon
  },
  data() {
    return {
      label: '',
      tableData: [],
      outStyle: {
        width: '24px',
        height: '24px'
      },
      innerSize: {
        fontSize: '14px'
      }
    };
  },
  computed: {}
};

子组件：

<template>

  <div

    class="player-icon"

    :style="{

      width: outStyle.width,

      height: outStyle.height,

      lineHeight: outStyle.height

    }"

  >

    <span

      class="iconfont icon-yousanjiao"

      :style="{ fontSize: innerSize.fontSize }"

    ></span>

  </div>

</template>

<script>

export default {

　// 这种方式生效了

  props: ['outStyle', 'innerSize'],

 

　// 这种方式没生效，不知道为什么

  // props: {

  //   outStyle: {

  //     type: Object,

  //     default: () => {

  //       return {

  //         width: '24px',

  //         height: '24px'

  //       };

  //     }

  //   },

  //   innerSize: {

  //     type: Object,

  //     default: () => {

  //       return {

  //         fontSize: '14px'

  //       };

  //     }

  //   }

  // },

  created() {},

  data() {

    return {};

  }

};

</script>

<style lang="scss">

.player-icon {

  @include abs-center();

  @include round(2.142857rem);

  border-radius: 50%;

  background-color: rgba($color: #fff, $alpha: 0.5);

  text-align: center;

  line-height: 24px;

  span {

    // display: inline-block;

    // margin: auto;

    // font-size: 1.428571rem;

    color: $theme-color;

  }

}

</style>