Vue.js 如何在复杂的vue应用程序中启用禁用组件？

我刚刚接触vue，正在开发这个示例Notes应用程序，可以在下面找到它

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

假设我在左边有一个按钮，叫做message，还有另一个组件列表，比如NotesList和它的MessagesList。所以，当我点击message按钮时，我希望NotesList显示，MessageList出现，反之亦然。我不希望NotesList在屏幕上保持一致

这是App.vue和main.js文件，请在github页面中查看模式代码。

---

您可以在每个组件上使用，也可以使用。在任何一种情况下，您的按钮都应该切换一个数据值，该值将用于控制显示哪个组件。

我看到了一些示例，例如此链接，但如何在这个Notes应用程序中应用。我应该为最上面的div加一个v-if吗？？我认为动态组件是最好的选择，但otes应用程序是在vue 1.0中构建的，我认为动态组件示例是2.0。我如何将Notas应用程序升级到2.0而不感到痛苦？vue 1也有。假设我使用v-if=seen，但在示例中，我刚刚发布的v-if和v-on是在同一个html上，那么我如何在不同的组件上做呢？我的意思是一个组件中的按钮会显示隐藏另一个组件，这可能吗？html中的参数是全局的？我看到的所有示例都有数据：{seen:true}。然而，并没有数据，而是导入其他组件的应用程序组件。你可以在Notes应用程序中检查代码，它只有很少的几行代码。

<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>

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 }
})