Как v-bind:class работает с пользовательскими компонентами в Vue.js?

Всем привет, подскажите пожалуйста, как именно прикрепляются классы когда я использую v-bind на созданном мной компоненте?

По сути так же как если к компоненту приделать отдельно в обычном атрибуте class значения, он задаст его корневому элементу, вот пример:


<div id="comp-container">
<my-comp
class="deco" v-bind:class="{bigDeco}">

В первом блоке кода html конструкция, создаем блок который привязываем к объекту vue, затем используем созданный компонент, передаем ему класс deco, и биндим класс bigDeco, далее в js vue:

Vue.component('my-comp', {
data: function(){
return {someText:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi corporis velit voluptatum.\n'}
}
,
template: '

{{ someText }}

'
})


var Vue = new Vue({
el:"#comp-container",
data: {
bigDeco:''
}
})

В начале мы создаем компонент, первым атрибутом задаем ему имя, затем вторым создаем объект который будет хранить данные про этот компонент, ну и в конце сам шаблон, далее создаем объект vue, в котором создаем свойство bigDeco, компонент обязательно должен быть внутри блока к которому привязан vue объект!