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来执行此操作。在任何一种情况下，您的按钮都应切换一个数据值，该值将用于控制显示哪个组件。

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

1 个答案: