Vue.js 如何根据Vuejs中的子组件函数调用更改类

我是Vuejs新手，在尝试使用汉堡包菜单功能时发现了这个问题

为了简化，我在下面添加了代码spinets

App.vue

<keep-alive>        
    <div class="body-wrapper" v-bind:class="menuOpenCls">
         <div class="hamburger-wrapper" v-on:click="mobileMenu()">
              <div class="hamburger-menu">
                   <span></span>
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
          </div>        
     <router-view v-bind:headerMenu="headerMenu" v-bind:footerMenu="footerMenu" v-bind:ShowSmileys="ShowSmileys"></router-view>
     </div>
</keep-alive>

Header.vue

<header>        
        <nav v-if="headerMenu"> 
           <ul class="menu">    
               <li><router-link v-bind:to="item.Url" exact v-on:click="**<<function to change class on App.vue>>**>{{item.Name}</router-link></li>
           </ul>    
        </nav>      
</header>

据我所知，您试图在不一定相关的组件（父/子）之间传递数据

您是否尝试过使用Vue
EventBus
？一个很好的例子：

我在这里发布相关信息[我在我的两个VueJS项目中使用这些信息的目的与您的完全相同：单击某个位置可在其他位置切换CSS类：-）]

在您的
main.js
中：

const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
          return EventBus
        }
    }
})

Header.vue
中的单击事件将在全局总线上发出一个事件：

this.$bus.$emit('toggle-class-name')

App.vue

将监听事件并执行所需操作：

created () {
    ...
    ...
    this.$bus.$on('toggle-class-name', () => {
        // toggle the class name here
    })
}

---

希望这有帮助

更具体地说，你想实现什么，你会犯什么错误？谢谢你，gvk！：）你的解释帮助我找到了解决办法。你救了我一天！

const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
          return EventBus
        }
    }
})

this.$bus.$emit('toggle-class-name')

created () {
    ...
    ...
    this.$bus.$on('toggle-class-name', () => {
        // toggle the class name here
    })
}