Для скрытия всех компонентов кроме одного в Vue.js вы можете использовать условную директиву v-if в сочетании с директивой v-show.
Перед тем, как продолжить, убедитесь, что вы импортировали Vue.js и зарегистрировали необходимые компоненты в вашем приложении.
Есть несколько способов достичь этой функциональности, вот три наиболее распространенных способа:
1. Использование флага в компоненте:
В этом случае в родительском компоненте у вас будет флаг, который указывает, должен ли определенный компонент быть отображен или скрыт. Вы можете использовать v-if внутри шаблона родительского компонента, чтобы условно отображать компоненты. Например:
<template>
<div>
<button @click="showComponent = 'componentA'">Показать компонент A</button>
<button @click="showComponent = 'componentB'">Показать компонент B</button>
<component-a v-if="showComponent === 'componentA'"/>
<component-b v-if="showComponent === 'componentB'"/>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
components: {
ComponentA,
ComponentB,
},
data() {
return {
showComponent: null,
};
},
};
</script>
В этом примере есть две кнопки, при нажатии на которые компонент A или компонент B будут показаны, а остальные компоненты будут скрыты.
2. Использование динамического компонента:
Еще один способ достичь этого - использовать динамические компоненты и динамическое свойство :is вместе с v-if. Это предоставит вам возможность условно отображать компоненты на основе значения переменной. Например:
<template>
<div>
<button @click="currentComponent = 'ComponentA'">Показать компонент A</button>
<button @click="currentComponent = 'ComponentB'">Показать компонент B</button>
<component :is="currentComponent" v-if="currentComponent" />
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
components: {
ComponentA,
ComponentB,
},
data() {
return {
currentComponent: null,
};
},
};
</script>
В этом примере по-прежнему есть две кнопки, но вместо того, чтобы иметь отдельные свойства для каждого компонента, у нас есть одна переменная currentComponent, которая указывает, какой компонент должен быть отображен. При нажатии на кнопку, соответствующий компонент будет отображаться, а остальные компоненты будут скрыты.
3. Использование vuex:
Третий способ - использовать состояние хранилища, такое как Vuex, чтобы хранить информацию о текущем отображаемом компоненте и использовать его для условного отображения компонентов. Примерно так:
В файле store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
currentComponent: null,
},
mutations: {
setCurrentComponent(state, componentName) {
state.currentComponent = componentName;
},
},
actions: {
setCurrentComponent({ commit }, componentName) {
commit('setCurrentComponent', componentName);
},
},
});
В родительском компоненте:
<template>
<div>
<button @click="showComponent('ComponentA')">Показать компонент A</button>
<button @click="showComponent('ComponentB')">Показать компонент B</button>
<component :is="currentComponent" v-if="currentComponent" />
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
computed: mapState(['currentComponent']),
methods: mapActions(['setCurrentComponent']),
methods: {
showComponent(componentName) {
this.setCurrentComponent(componentName);
},
},
};
</script>
В этом примере у нас также есть кнопки для отображения каждого компонента, но на этот раз мы используем хранилище Vuex для хранения информации о текущем отображаемом компоненте. При нажатии на кнопку вызывается соответствующая мутация и команда, чтобы изменить значение текущего компонента в хранилище, и соответствующий компонент будет отображен, а остальные скрыты.
Надеюсь, эти примеры помогут вам понять, как скрыть все компоненты кроме одного в Vue.js. В зависимости от ваших потребностей и структуры приложения, один из этих подходов может быть наиболее подходящим для вас.