Updated response:
If I understand correctly, one way to solve is to create the Color component within the "parent" component, ie to not create a new / component in the case of the Color component. In tag style you normally put the classes as if they were for the "Father" component, but they are only used in the "Son" component, for example:
Parent component
<template lang="pug">
div
color(:row="{ color: 'red' }")
</template>
<script>
import Vue from 'vue'
Vue.component('color', {
props: ['row'],
template: '<div class="badge-color" :style="{backgroundColor: this.row.color}"><p>teste</p></div>'
})
</script>
<style lang="stylus">
.badge-color
width 100%
</style>
Another way to do this is to put Global% in your main.js file or other configuration file, for example:
main.js
import Vue from 'vue'
import App from '@/App'
import router from '@/router'
import store from '@/store'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
Vue.component('color', {
props: ['row'],
template: '<div class="badge-color" :style="{backgroundColor: this.row.color}"><p>teste</p></div>'
})
And in your component you want to use the Color component, you normally call it, and it inserts css into your tag style in the same way, p>
Parent component using the Global Color component
<template lang="pug">
div
color(:row="{ color: 'red' }")
</template>
<script>
// código
</script>
<style lang="stylus">
.badge-color
width 100%
</style>
