Vue JS 从父组件访问数据

Question

我正在使用 vue cli webpack 并且在我的 App.vue 文件中有一个 'links' 数组。我想弄清楚如何在 navbar.vue 文件中使用 'links' 中的项目。我尝试使用道具，继承属性并使用 :links="links" 传递它，但似乎没有任何效果。只是为了说明我也在使用 bulma css 库以防万一。

App.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>

navbar.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>

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

Answer 1

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

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

然后在parent中就可以使用了：

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

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

Answer 2

您忘记了 "bind" 您的属性 "links"。

而不是

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

使用：

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

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

Vue JS 从父组件访问数据

Vue JS access data from parent component

vue.js

vue-router

bulma