Vue JS 将 css 从孩子应用到父母的最佳方式答案

【问题标题】：VueJS best way apply css from child to parrentsVue JS 将 css 从孩子应用到父母的最佳方式
【发布时间】：2024-01-30 23:15:03
【问题描述】：

VueJS 将 css 从孩子应用到父母的最佳方式是什么？我有很多页面布局left\right\menu\tables\colunm\etc。所有路线都以深度路径呈现。今天有页面（组件）需要将 css 样式应用于 N 级以上的父级。我该怎么做？

【问题讨论】：

如果你有很多 N 层的组件，那么选择 Vuex

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

您可以在全局级别创建一个简单的 EventBus：

const eventBus = new Vue();

然后eventBus.$emit('signal-name', ...args)

然后你可以做一系列的事情，比如

eventBus.$on(name, callback) -> 创建一个监听器来接收发射

eventBus.$once(name, callback) -> 接收一次并移除监听器

eventBus.$off(name, callback) -> 移除监听器

您可以传递一些布尔或 CSS 类：

eventBus.$emit('signal-name', true) -> 然后根据它显示一些东西 eventBus.$emit('signal-name', ['is-white', 'is-bold'])

注意：对于$off：

  * If no arguments are provided, remove all event listeners;
  * If only the event is provided, remove all listeners for that event;
  * If both event and callback are given, remove the listener for that specific callback only.

【讨论】：

虽然这可以工作，但最好使用像 Vuex 这样的状态机，甚至是一个简单的对象。根据创建/触发监听器/组件的时间等，很容易错过事件。状态对象将始终反映正确的值，无论“监听器”在更改时是否处于活动状态。
当我做与数据相关的事情时，我通常会使用状态管理工具。但是对于应用程序遥远角落内的操作，我更喜欢 EventBus :-)