'vue.js v-slot use of different props in single component

How do I use different props in a single component element?

The code:

<BaseTitle v-slot="[{ highlightClass, highlightColor }]" tag="h6">
Lorum Ipsum 
<span :class="highlightClass" :highlight-color="secondary“>Highlighted Statement Copy</span>
</BaseTitle>

With v-slot I am „importing“ the different props; but how do I adjust the validator it should use? The props in BaseTitle component:

highlightColor: {
      type: String,
      required: false,
      default: 'primary',
      validator: (v) =>
        [
          'primary',
          'secondary',
          'tertiary',
          'transparent',
          'transparent-gray',
          'white',
          'light',
          'dark'
        ].includes(v)
    }

Whats wrong? Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source