Я сделал пример в 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>
Может ли кто-нибудь помочь мне с этим?
Я думаю, вы задаете неправильный вопрос. Даже если вы вызывали точно такой же метод, заголовок не рухнет. Вы можете установить collapsed = true
в своем заголовке точно так же, как и на боковой панели, с дублирующимся методом, но нет классов или CSS, которые применялись бы к заголовку, что привело бы к его сворачиванию... по крайней мере, в соответствии с кодом, который вы написали в своем песочница
Вы должны сделать 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, в этом случае рассмотрите возможность пометить его как принятый ответ, чтобы будущие пользователи знали, что он ответил на ваш вопрос.
Состояния компонентов изолированы. Если компоненту является другая «ветка», которой требуется доступ к состоянию недостижимого компонента, вам, вероятно, понадобится библиотека управления состоянием, такая как pinia. Ваше логическое значение
collasped
будет общим для всех компонентов, поэтому вы можете управлять им из любого места :)