在 vue 中将链接数组从父级传递给子级（创建链接菜单）答案

【问题标题】：Pass links array from parent to child in vue (create links menu)在 vue 中将链接数组从父级传递给子级（创建链接菜单）
【发布时间】：2020-04-17 05:47:33
【问题描述】：

我正在尝试在 vue.js 中创建一个菜单。我有 2 个组件 - Navigation 和 NavLink。我在 App.vue 文件中创建了一组链接，并将其作为道具传递给导航组件。在导航组件中，我使用 NavLink 为数组中的每个项目创建 li 元素。

App.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <app-nav></app-nav>
        <hr />
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "./components/Navigation.vue";
export default {
  components: {
    "app-nav": Navigation
  }
};
</script>

<style>
</style>

导航.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <nav-link v-for="link in links"></nav-link>
      </ul>
    </div>
  </nav>
</template>

<script>
import NavLink from "./NavLink.vue";
export default {
  data() {
    return {
      links: ["Home", "Login", "Shop"]
    };
  },
  components: {
    "nav-link": NavLink
  }
};
</script>

<style>
</style>

NavLink.vue

<template>
    <li class="nav-item">
        <a class="nav-link" href="#"></a>
    </li>
</template>

<script>
export default {
    props: ["links"]
}
</script>

<style>

</style>

它实际上创建了 'NavLink' 的 3 个元素，但链接标题本身是空的，如何将数组项的标题传递给 NavLink 组件？

【问题讨论】：

vuejs.org/v2/guide/…
links 数据没有传入app-nav 组件
我已经编辑了我的代码，现在链接数据正在从 Navigation 传递到 NavLink，我在 dom 中看到了 3 个 li 元素。问题是我看不到 li 元素内每个链接的标题。链接是空的。我如何获得标题？
@OrBen-Yossef 第一条评论将您指向文档。请阅读。你会明白，你会学习，你会回答自己:-)

标签： javascript vue.js vuejs2

【解决方案1】：

您需要在NavLink 组件中传递一个title 属性

导航.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <nav-link v-for="link in links" :title="link"></nav-link>
      </ul>
    </div>
  </nav>
</template>

<script>
import NavLink from "./NavLink.vue";
export default {
  data() {
    return {
      links: ["Home", "Login", "Shop"]
    };
  },
  components: {
    "nav-link": NavLink
  }
};
</script>

<style>
</style>

NavLink.vue

<template>
  <li class="nav-item">
     <a class="nav-link" href="#">{{ title }}</a>
  </li>
</template>

<script>
export default {
  props: ["title"]
}
</script>

<style>

</style>

【讨论】：