Блог

Главная - Вопросы по программированию - Bootstrap-vue — изменить панель навигации из компонента Vue?

Bootstrap-vue — изменить панель навигации из компонента Vue?

#javascript #vue.js #vue-component #bootstrap-vue

#javascript #vue.js #vue-компонент #bootstrap-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>

Комментарии:

1. пожалуйста, поделитесь кодом родительского компонента

2. Хотя это может сработать, вы можете попробовать использовать $emit , с или без шины событий, чтобы уведомить, что родительский элемент должен вставить подменю.

3. @BoussadjraBrahim Я добавил немного кода

4. menu: [ 'Item': { href: '#' } ] недопустимый синтаксис, который вы должны выполнить menu: [{ href: '#' } ]

Ответ №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>