Как передать класс по клику в другой компонент?

Question

[Alex]

Подскажите пожалуйста у меня есть компонент TableControl.vue, вешается клик @click="sortOpen" для открытия окна, мне нужно передать класс в другой компонент TableTamplate.vue

<tr class="sticky bg-black-900 top-0 z-10 h-10" :class="{'relative' : sortOpen}"

но не срабатывает, объясните пожалуйста попробовал через $emit, но не могу понять как пробросить клик. Спасибо заранее.

Comments

[Farkl]

просто передавай пропсом переменную в которой будет хранится название класса

[Alex]

Farkl, добрый день, спасибо. А подскажите а как мне клик передать. Например я вешаю клик в одном компоненте @click="sortOpen", а в другом компоненте добавляю :class="{'relative' : sortOpen}", и ничего не работает. Как правильно передать клик ?

Answer 1

[Олег Кириллов]

В дочке:

<... @click.native="$emit('smthngClick')" ...>

В родителе:

<TableControl @trClick="sortOpen = !sortOpen" />
...
<tr :class="{relative: sortOpen}">
...

Ну и вариации этого в зависимости от требуемого поведения. Если нужно из родителя в дочку, то передаете через проп в дочку переменную, а значение ее меняете в родителе по клику просто. Не очень просто понял структуру кейса.

Comments

[Alex]

Олег Кириллов, добрый день что-то я не понял, подскажите пожалуйста
<... @click.native="$emit('smthngClick')" ...>
во 1 у меня на native ругается, во 2 что должно быть в $emit(sortOpen ) или что-то другое ? И вопрос зачем тогда, вешать если мне только класс передать.
@trClick="sortOpen = !sortOpen"
Какая у меня проблема я не могу понять как передавать данные я понимаю props, но не могу понять $emit, а именно по клику в одном компоненте передать класс в другом.

[Олег Кириллов]

Alex, `native` нужен если у вас Vue 2 и `click` вешается на компонент, в остальных случаях можете убрать его (просто `@click=`) будет.

По остальному - я не вижу структуры вашего приложения, поэтому исхожу из того, что понял :)

Если абстрагироваться и решать лишь вопрос передачи класса из дочки в родителя, то:

В дочке:

<... @click="$emit('onClassTransfer', 'hereClassName')" ...>

В родителе:

<дочка @onClassTransfer="transferedClass = $event" :class="transferedClass">
...
data: () => ({
transferedClass: '',
})

Ну и https://vuejs.org/guide/components/events.html внимательно пересмотрите.