Vuejs将类切换到组件中单击按钮时的主体

Question

如果我点击标题组件内的按钮，我想将类切换到主体或根元素("#app"(

标题.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>

应用程序：

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

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

Answer 1

您可以在头中发出事件，并可能在安装的应用程序组件中捕获它，如下所示：

在侧边栏或其他组件中：

on_some_btn_click: function (){
this.$emit('toggle_root_class');
}

在您的应用程序组件中：

mounted: function(){
var _this = this;
this.$on('toggle_root_class', function(){
_this.active = !_this.active;
});
}

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

Answer 2

问题在于您的组件范围。您试图访问App.vue中Header.vue中的数据，但由于代码中显示的结构，这是不可能的。考虑将isActive数据移动到App.vue或使用Vuex。

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>