Bootstrap-vue-从Vue组件修改导航栏？

如何解决Bootstrap-vue-从Vue组件修改导航栏？

我有一个Vue Bootstrap SPA，其结构如下：

• 布局
  • 导航栏
  • 面包屑
  • 路由器视图
• 组件
  • 一些内容

我希望我的component为父级导航栏注入一个子菜单。例如：

export default {
    name: 'Component',data() {
       return {
           menu: [
               'Item': {
                   href: '#'
               }
           ]
       }
    },mounted() {
       parent.menu.addItem(this.menu)
    }
}

有可能这样做吗？

以下是顶部布局：

<template>
  <div>
    <navbar :menu="menu"></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './navbar'

export default {
  components: {
    navbar: NavBar
  },data() {
    return {
      menu: [
        {
          text: "Foo",href: "/foo",},{
          text: "Bar",href: "#",],};
  },};
</script>

解决方法

您可以向父组件发出事件，如：

    data() {
       return {
           menu: [
                 {
                   href: '#'
               }
           ]
       }
    },mounted() {
       this.$emit('emit-menu',this.menu)
    }

父级：

<template>

<navbar :menu="menu" @emit-menu="addItem"></navbar> 

    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './navbar'

export default {
  components: {
    navbar: NavBar
  },methods:{
   addItem(menu){
       this.menu=[..this.menu,...menu]
  }
 },data() {
    return {
      menu: [
        {
          text: "Foo",href: "/foo",},{
          text: "Bar",href: "#",],};
  },};
</script>