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>

 

 

标签：向子,style,return,color,height,default,组件,24px
来源： https://www.cnblogs.com/hahahakc/p/13151626.html