我正在使用 vue cli webpack 并在我的 App.vue 文件中有一组“链接”。我想弄清楚如何在我的 navbar.vue 文件中使用“链接”中的项目。我尝试过使用 props、inherit 属性并使用 :links="links" 传递它,但似乎没有任何效果。只是为了说明我也在使用 bulma 的 css 库,以防万一这很重要。
应用程序.vue:
<template>
<div id="app">
<navbar links="links"></navbar>
</div>
</template>
<script>
import navbar from './components/navbar'
export default {
name: 'app',
components: {
navbar
},
data () {
return {
links: [
{name: 'Link 1', url: '#'},
{name: 'Link 2', url: '#'}
]
}
}
}
</script>
导航栏.vue:
<template>
<nav class="navbar has-shadow">
<div class="navbar-menu">
<a class="navbar-item">
{{brand}}
</a>
<a class="navbar-item" v-for='link in links'>
{{link.name}}
</a>
</div>
</nav>
</template>
<script>
import app from '../App'
export default {
name: 'navbar',
inherit: true,
data () {
return {
brand: 'Vue Website',
}
},
}
</script>
我很确定我已经检查了我可以在网上找到的所有方法,但它们都不起作用,或者我可以弄清楚如何使用它们,如果有人可以帮助我,我将不胜感激。:)