如何在复杂的 vue 应用中启用禁用组件？

Question

我是 vue 的新手，正在开发这个示例 Notes 应用程序，可以在下面找到它

https://coligo.io/learn-vuex-by-building-notes-app/

我的问题是如何更改在工具栏后面的屏幕上看到的组件。我已经阅读了基本指南，但我仍然支持它。

假设我在左侧有一个按钮，称为消息，并有另一个组件列表，如 NotesList 及其称为 MessagesList。因此，当我单击消息按钮时，我希望 NotesList 消失，而 MessageList 代替那个，反之亦然。我不希望 NotesList 在屏幕上保持一致。

这里是 App.vue 和 main.js 文件，模式代码请查看 github 页面。 https://github.com/coligo-io/notes-app-vuejs-vuex

<template>
  <div id="app">
    <toolbar></toolbar>
    <notes-list></notes-list>
    <editor></editor>
  </div>
</template>

<script>
import Toolbar from './Toolbar.vue'
import NotesList from './NotesList.vue'
import Editor from './Editor.vue'
import MessageList from './MessageList.vue'

export default {
  components: {
    Toolbar,
    NotesList,
    Editor,
    MessageList
  }
}
</script>

Main.js

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
  store, // inject store to all children
  el: 'body',
  components: { App }
})

Answer 1

您可以通过在每个组件上使用v-if 或使用dynamic components 来做到这一点。在任何一种情况下，您的按钮都应该切换一个数据值，该数据值将用于控制显示哪个组件。