У скоуп слотов нет видимости в @click? Хотел сделать что-то

Question

У скоуп слотов нет видимости в @click? Хотел сделать что-то

по типу
<template #activator="{ showModal }">
<button @click="showModal = true">Showme {{ showModal }}</button>
</template>
Клик не отрабатывает, а вот в текстовой части выводит все верно

#frontend #javascript #programming #russian #vue.js

0

30.03.2021

12 ответов

13 просмотров

Alexander Автор вопроса

Vladimir Voytenko ️
в скопед слоте возвращай не стейт, а функцию котор...

Это получается обязательно в методы её объявить когда байндишь в слот? А если да, то насколько это нормальная практика? Либо лучше через ref и @click="$refs.name.toggle"?

0

30.03.2021

Vladimir Voytenko ️

Alexander
Это получается обязательно в методы её объявить ко...

передать в скопед метод, лучше того, что пытались сделать вы

0

30.03.2021

Grigorii K. Shartsev

Alexander
Это получается обязательно в методы её объявить ко...

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

0

30.03.2021

Grigorii K. Shartsev

Vladimir Voytenko ️
передать в скопед метод, лучше того, что пытались ...

А как тебе такое решение: <template #activator="{ obj }"> <button @click="obj.showModal = true">Showme {{ obj.showModal }}</button> </template> =D

0

30.03.2021

Alexander Автор вопроса

Vladimir Voytenko ️
передать в скопед метод, лучше того, что пытались ...

Я имею ввиду про дергать метод ref'ом vs дергать так, как вы подсказали. Что более vue-way

0

30.03.2021

Vladimir Voytenko ️

Alexander
Я имею ввиду про дергать метод ref'ом vs дергать т...

разные кейсы решаются, и то и другое норм

0

30.03.2021

Grigorii K. Shartsev

Alexander
Я имею ввиду про дергать метод ref'ом vs дергать т...

Через реф у вас получается странное решение. Есть рендер функция, которая рендерит кнопку. Кнопка зависит от параметра. Но изменяете вы параметр, используя обращение к компоненту персонально через родителя, и который предоставляет публичный метод для этого изменения. Не понятно, зачем здесь выходить за рамки слота. Передать сеттер - нормальное решение. Данные и изменение данных пойдут вместе

0

30.03.2021

Alexander Автор вопроса

Grigorii K. Shartsev
Не обязательно, маленькую функцию можно сразу в па...

Примерно так, получается? <slot name="activator" :showModal="() => {visible = true}"> Попытался вчитаться почему когда я пытался через showModal = true не отрабатывало, я правильно понял, что слот возвращает функция, соответственно ссылки на showModal в слоте и самом компоненте выходили разные?

0

30.03.2021

Grigorii K. Shartsev

Alexander
Примерно так, получается? <slot name="activator" ...

Слот - это место, где в компонент рендерится некоторое содержимое. То, что передаётся через слот - это шаблон, а в итоге рендер функция, которая на вход принимает параметры слота и по ним рендерит содержимое слота. Соответственно showModal = true - это просто внутри функции присваивание нового значение в аргумент этой функции. Изменение значения аргумента в теле функции не влияет на то, что передали в качестве значения аргумента

0

30.03.2021

Grigorii K. Shartsev

Grigorii K. Shartsev
Слот - это место, где в компонент рендерится некот...

<slot name='name' :param="value" /> - это аналог render this.$scopedSlots.name({ param: this.value }) А передача шаблона в слот <template #name="{ param }"> <button @click="param = x"> это аналог передачи рендер функции ({ param }) => h('button', listeners: { click: () => param = x } ) Т.е. просто присваивается внутри тела рендер функции новое значение в параметр. Никак не влияет на переданное значение

0

30.03.2021

Alexander Автор вопроса

Grigorii K. Shartsev
<slot name='name' :param="value" /> - это аналог r...

Большое спасибо! Надо было мне сразу функцию задебажить чтобы посмотреть что под капотом он локально в функцию копирует значения, тогда и пояснение не понадобилось бы. Изначально подумал, что там контекст компонента сохраняется через что-то наподобие ref.showModal в теле функции на клик 😢

0

30.03.2021

Vladimir Voytenko ️ · Accepted Answer

Vladimir Voytenko ️

в скопед слоте возвращай не стейт, а функцию которая стейт поменяет и засовывай её в клик

0

30.03.2021

169 похожих чатов

У скоуп слотов нет видимости в @click? Хотел сделать что-то

12 ответов

Похожие вопросы