Как вызвать метод из другого компонента

Я сделал пример в Codesandbox

Есть ли способ свернуть боковую панель, нажав кнопку «Col-2». Кнопка «Колонка-1» работает нормально, но необходимо, чтобы она работала при нажатии на «Колонка-2».

Я пытался вызвать свернутыйButton, но это не сработало.

<script>
    export default {
        name: 'template',
        methods: {
            setCollapsed () {
                this.collapsed = !this.collapsed
            },
             collapseButton () {
                this.$emit('setCollapsed')
                this.collapsed = !this.collapsed
            }
        }
    }
</script>

Может ли кто-нибудь помочь мне с этим?

Состояния компонентов изолированы. Если компоненту является другая «ветка», которой требуется доступ к состоянию недостижимого компонента, вам, вероятно, понадобится библиотека управления состоянием, такая как pinia. Ваше логическое значение collasped будет общим для всех компонентов, поэтому вы можете управлять им из любого места :)

Kapcash 06.01.2023 17:14

Я думаю, вы задаете неправильный вопрос. Даже если вы вызывали точно такой же метод, заголовок не рухнет. Вы можете установить collapsed = true в своем заголовке точно так же, как и на боковой панели, с дублирующимся методом, но нет классов или CSS, которые применялись бы к заголовку, что привело бы к его сворачиванию... по крайней мере, в соответствии с кодом, который вы написали в своем песочница

yoduh 06.01.2023 17:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны сделать collapsed проп и управлять им из родительского компонента. Вам нужно будет прослушать событие (this.$emit('setCollapsed')) в родительском компоненте и соответствующим образом обновить collapsed.

Я надеюсь, что это поможет, удачи!

Ответ принят как подходящий

Рекомендуемый способ добиться этого — использовать магазин.

Магазин — это модуль, внешний по отношению к любому компоненту, который можно импортировать в любое количество компонентов. Когда состояние хранилища (что очень похоже на функцию data компонента) изменяется, изменение распространяется на каждый отдельный компонент, где используется хранилище.


Поскольку вы используете Vue 2, вы можете использовать миксин .

Вот миксин, использующий базовую версию магазина под капотом: https://codesandbox.io/s/vue-forked-tz1yox?file=/src/components/sidebar.vue

Более подробно, он использует реактивный объект, который служит общим состоянием для свернутого состояния боковой панели, предоставляя доступный для записи вычисляемый (collapsed) и метод toggleSidebar.

Использование примеси в любом компоненте эквивалентно записи вычисляемого объекта для записи и метода в компонент.

Примечание: миксины плохо работают с TypeScript. Но приведенному выше решению не нужен миксин. Я использовал только один, поэтому мне не нужно было писать один и тот же вычисляемый метод в обоих компонентах. Ключом к его работе является общий/внешний реактивный объект. В Vue 3 вы могли бы добиться этого с помощью Composition API.

@Wilco-S, в этом случае рассмотрите возможность пометить его как принятый ответ, чтобы будущие пользователи знали, что он ответил на ваш вопрос.

tao 09.01.2023 11:49

Другие вопросы по теме