Question

如果我单击标题组件内的按钮，我想将类切换到主体或根元素（“ #app”）

Header.vue：

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" @click="collapedSidebar">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    collapedSidebar() {

    }
  }
}
</script>

App.vue：

<template lang="html">
  <div id="app" :class="{ active: isActive }">
   ...
  </div>
</template>

！如果我走错了方向，请纠正我。我是Vuejs的新手：）

Answer 1

问题出在您的组件范围内。您试图访问App.vue的Header.vue中的数据，这是代码中显示的结构所无法实现的。考虑将isActive数据移至App.vue或使用Vuex。

Answer 2

您可以在标头中发出一个事件，并可以像这样在安装的应用程序组件中捕获该事件：

在侧边栏或其他组件中：

[bsConfig]="{dateInputFormat: 'D MMMM YYYY '}"

在您的应用程序组件中：

on_some_btn_click: function (){

    this.$emit('toggle_root_class');

}

Vue可能会限制事件在同级组件中被观察到。因此，我在项目中使用EventBus来轻松处理事件发送。

Answer 3

您可以使用jquery为不在Vue模板内的元素切换类。您可以单击按钮并在其内部调用一个函数，也可以使用jquery在body标签中切换类。

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" :class="{ active: isActive }" @click="activeLink">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    activeLink() {
         $('body').toggleClass('.class-name');
    }
  }
}
</script>

Vue.js在单击组件时将类切换到主体

3 个答案: