Question

我正在使用vue cli webpack并在我的App.vue文件中有一系列'链接'。我想知道如何在navbar.vue文件中使用“链接”中的项目。我尝试过使用props，继承属性并将其传递给：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>

我很确定我已经检查了我在网上找到的所有方法，但没有一种方法可行，或者我可以找出如何使用它们，如果有人能帮助我，我会非常感激。：）

Answer 1

您需要在links中声明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

Answer 2

你忘了＆＃34;绑定＆＃34;您的财产＆＃34;链接＆＃34;。

而不是

<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访问父组件的数据

2 个答案: