Vuejs：动态 CSS 到组件插槽？

Question

我想知道如何设置组件插槽的样式，或者是否有更好的方法来做到这一点。 我创建了一个组件来处理我设置的动画 sass 文件的 colors。 我正在尝试使用 Vue 组件动态更改动画 colors 以避免冗余。 我是 Vue 组件的新手，我还没有找到任何可以回答我的问题的东西，所以如果有关于 go 的更好方法，请告诉我！

Tempalate ：

    <am-hover :background="'#e3342f'"
            ><button class="btn btn-danger hvr-sweep-to-right">
              Sign Up Free
            </button></am-hover
          >

Hover.vue Template ：

    <div>
        <slot :style="styleObject"></slot>
      </div>

Hover.vue Script ：

    <script>
    export default {
      props: {
        background: String,
        primary: String,
        secondary: String,
        highlight: String,
        active: String,
        shadow: String,
        bubbleWidth: String,
        bubbleHeight: String,
        bubbleColor: String,
        curlReveal: String,
        curlCrease: String,
        curlTransitionColor: String,
        curlBackgroundColor: String,
      },
      data() {
        return {
          styleObject: {
            //   Color Options
            'background-color': this.background,
            '--primaryColor': this.primary,
            '--secondaryColor': this.secondary,
            '--highlightColor': this.highlight,
            '--activeColor': this.active,
            '--shadowColor': this.shadow,
            // Speech Bubble Options
            '--tipWidth': this.bubbleWidth, //the width of the speech bubble tip
            '--tipHeight': this.bubbleHeight, //the height of the speech bubble tip
            '--tipColor': this.bubbleColor,
            // Curl Colors
            '--revealAreaColor': this.curlReveal, // reveal area behind the curl
            '--curlLineColor': this.curlCrease, // crease line
            '--curlTransitionColor': this.curlTransitionColor, // color transitioning from crease line to final color
            '--curlLastColor': this.curlBackgroundColor, // final color of the back of the curl
          },
        }
      },
    }
    </script>