0

我正在使用 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>

我很确定我已经检查了我可以在网上找到的所有方法，但它们都不起作用，或者我可以弄清楚如何使用它们，如果有人可以帮助我，我将不胜感激。:)

4

2 回答 2

1

你需要在 中声明links为一个 prop navbar.vue，否则 Vue 会忽略它：

export default {
    name: 'navbar',
    props: ['links'], // declare links as a prop
    data () {
        return {
            brand: 'Vue Website',
        }
    },
}

然后在父母中你可以使用它：

<navbar :links="links"></navbar>

见：https ://vuejs.org/v2/guide/components.html#Props

于 2017-09-22T11:39:41.130 回答
1

您忘记“绑定”您的属性“链接”。

代替

<navbar links="links"></navbar> 
// This will give you a string "links"

利用：

<navbar :links="links"></navbar>

更多信息： https ://vuejs.org/v2/guide/components.html#Dynamic-Props

于 2017-09-22T12:18:06.363 回答