Question

我是Vuejs的新手，在尝试执行汉堡菜单功能时发现了此问题。

为简化起见，我在下面添加了代码小节

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>

...

data() {
    return {
        menuOpen:''
    }
},

...

methods: {
      mobileMenu: function() {
          this.menuOpen = !this.menuOpen;
      }
}

...

computed:  {
    menuOpenCls: function() {
        return this.menuOpen ? 'menuopen' : '';
    }    
}

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>

我想根据Header.vue菜单链接中的单击事件来更改（切换）App.vue上的类名（主体包装器所在的类）。我该如何实现。有人可以帮忙吗？

Answer 1

据我了解，您正在尝试在不一定相关的[父/子]组件之间传递数据。

您是否尝试过使用Vue EventBus？一个很好的例子：https://alligator.io/vuejs/global-event-bus/

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

在您的main.js中：

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

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

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

和App.vue会监听事件并执行所需的操作：

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

希望这会有所帮助！

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

1 个答案: