将 class 添加到组件 Vue.js 中的 nabar 模态

Question

我想知道如何将 class 添加到导航栏组件中的模式？我的导航栏在 App.vue 中，我想创建一条消息，在我单击它时将 class“处于活动状态”添加到我的导航栏中的模态。但是我找不到方法..

谢谢

Answer 1

通常当你有 parent -> child 关系时，你可以使用 events。在这种情况下，由于您有两个未（直接）链接的组件，因此您有两个选择。

使用store（通常用于你的应用比较大的情况）

您可以使用 vuex 来拥有一个拥有全局状态的中心位置。一个简单的例子是：

store/main.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isModalOpen: false
  },
  getters: {
    isModalOpen => (state) => state.isModalOpen,
  },
  mutations: {
    setIsModalOpen (state, isOpen) {
        state.isModalOpen = isOpen;
    }
  }
})

然后您可以像这样访问组件中的商店：

<template>
  <navbar :class="[isNavBarOpen ? "is-active" : ""]" />
</template>

export default {
  computed: {
     isNavBarOpen () {
        this.$store.getters['isModalOpen']
     }
  }
}

Event bus（通常用于你有一个小应用程序并且不需要全局状态管理器的情况）

阅读有关 EventBus 的更多信息here。

您可以创建一个简单的 EventBus

services/eventBus.js

import Vue from 'vue';

const export EventBus = new Vue();

然后在模式打开时在您的组件上您可以执行以下操作：

// @ -> is an alias to your root folder. Most projects scafolded by Vue CLI has this by default
import {EventBus} from "@/services/eventBus"

export default {
  methods: {
    openStore: () => {
       // your logic to open modal
       EventBus.$emit('modal-open');
    }
  }
}

然后在你的 App.vue 上你只听这个事件

App.vue

<template>
  <navbar :class="[isModalOpen ? "is-active" : ""]" />
</template>

// @ -> is an alias to your root folder. Most projects scafolded by Vue CLI has this by default
import {EventBus} from "@/services/eventBus"

export default {
  data() {
    return {
      isModalOpen: false,   
    }
  },
  created() {
     EventBus.$on('modal-open', this.onModalOpen);
  },
  methods: {
     onModalOpen() {
       this.isModalOpen = true;
     }
  }
}

您将选择哪个取决于我们的应用程序结构，以及您是否认为它足够复杂以使用中央状态管理 (vuex)。

代码中可能包含一些错误，但主要思想是存在的。

将 class 添加到组件 Vue.js 中的 nabar 模态

Add a class to a nabar modal in a component Vue.js

html

javascript

modal-dialog

vue.js