Для передачи класса из одного компонента в другой в Vue.js можно использовать так называемый "пропс" (props) или "события" (events).
Сначала создается компонент, из которого нужно передать класс. Для примера, назовем его "Компонент А" (ComponentA). Внутри этого компонента определяется переменная classToPass, которая будет содержать передаваемый класс. Затем создается метод passClass(), который будет отвечать за передачу класса в другой компонент.
<template>
<div>
<button @click="passClass">Послать класс</button>
</div>
</template>
<script>
export default {
data() {
return {
classToPass: 'my-class' // класс, который нужно передать
}
},
methods: {
passClass() {
this.$emit('pass-class', this.classToPass); // генерирование события "pass-class" с передаваемым классом
}
}
}
</script>
Затем создается компонент, в который будет передаваться класс. Назовем его "Компонент Б" (ComponentB). Внутри этого компонента определяется переменная passedClass, которая будет содержать переданный класс. Для получения класса используется пропс passedClass, который определяется во внешнем компоненте (в данном случае в родительском компоненте, который содержит оба компонента).
<template>
<div :class="passedClass"> // использование переданного класса через пропс passedClass
<p>Этот элемент получит переданный класс</p>
</div>
</template>
<script>
export default {
props: ['passedClass'] // пропс passedClass
}
</script>
Наконец, создается родительский компонент, который содержит оба компонента. В родительском компоненте определяется переменная classFromComponentA, которая будет содержать передаваемый класс.
<template>
<div>
<component-a @pass-class="classFromComponentA = $event"></component-a> // передача класса с помощью события и сохранение в переменную classFromComponentA
<component-b :passed-class="classFromComponentA"></component-b> // передача переменной classFromComponentA через пропс passed-class
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
classFromComponentA: null // переменная для сохранения переданного класса
}
}
}
</script>
Теперь, при клике на кнопку в "Компоненте А" класс my-class будет передаваться в "Компонент Б" и применяться к соответствующему элементу.