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

【问题标题】：Bootstrap-vue - Modify Navbar from Vue component?Bootstrap-vue - 从 Vue 组件修改导航栏？
【发布时间】：2021-01-12 16:59:00
【问题描述】：

我有一个具有以下结构的 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>

【问题讨论】：

请分享父组件的代码
虽然它可能有效，但您可以尝试使用$emit，使用或不使用事件总线来通知父元素应该插入子菜单。
@BoussadjraBrahim 我添加了一些代码
menu: [ 'Item': { href: '#' } ] 不是您应该使用的有效语法menu: [{ href: '#' } ]

标签： javascript vue.js vue-component bootstrap-vue

【解决方案1】：

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

    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>

【讨论】：