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

Posted 2023-02-23

【中文标题】如何在复杂的 vue 应用中启用禁用组件？

【英文标题】：How to enable disable component in a complex vue app?

【发布时间】：2018-07-15 12:18:45

【问题描述】：

我是 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 
)

【参考方案1】：

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

【讨论】：

我看到了一些示例，例如此链接，但我如何在此 Notes 应用程序中应用。我应该为顶部 div 放置一个 v-if 吗？ paulund.co.uk/vuejs-conditional-show-and-hide

我看到 Dynamic-Components 是最好的选择，但是 otes 应用程序是在 vue 1.0 中构建的，我认为 Dynamic-Components 示例是 2.0 我怎样才能轻松地将 Notas 应用程序升级到 2.0？

Vue 1 也有dynamic components。

假设我使用 v-if="seen" 但在示例中我只是发布 v-if 和 v-on 在同一个 html 上，那么我该如何处理不同的组件？我的意思是一个组件中的按钮将显示隐藏另一个组件，这可能吗？ html 中的参数是全局的？

我看到的所有例子都有数据： 看到：真 。但是没有数据，而是导入其他组件的 App 组件。您可以在 Notes App 中检查代码，只需几行代码。