[英]Combining bootstrap-vue and vue-router inside navbar component
[英]Bootstrap-vue - Modify Navbar from Vue component?
我有一个具有以下结构的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.