时间戳

首页 > 解决方案 > 向组件 Vue.js 中的 nabar 模态添加一个类

javascript - 向组件 Vue.js 中的 nabar 模态添加一个类

问题描述

我想知道如何将类添加到导航栏组件中的模式？我的导航栏在 App.vue 中，我想创建一条消息，当我单击它时，将“is-active”类添加到导航栏中的模式中。但是我找不到这样做的方法..

谢谢

标签： javascripthtmlvue.jsmodal-dialog

解决方案

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

使用 store （它通常用于您的应用程序大小合适的情况）

您可以使用vuex拥有一个中央位置，您将在其中拥有您的全局状态。一个简单的例子是：

商店/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']
     }
  }
}

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

在此处阅读有关 EventBus的更多信息。

您可以创建一个简单的EventBus

服务/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身上你只听这个事件

应用程序.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)。

代码中可能包含一些错误，但主要思想就在那里。

推荐阅读