带有 Vue.js 的导航栏

Question

我目前正在使用 Vue.js 开发一个项目，这是我第一次使用 Webpack、Vue.js、Babel 等在一个完整的环境中工作。

在以前的项目中，有一个导航栏非常简单。 只需添加 HTML 结构，硬编码链接，就是这样，导航栏就完成了。 现在有了 Vue.js，我认为这会破坏组件的感觉。 我添加了一个<nav-bar> -component 和几个<nav-bar-item> -components。 这很好用，导航栏出现并包含项目。

现在进入实际问题：我现在将这些项目的链接和文本放在哪里？ 我的猜测是将它们放在<nav-bar> -component 中，但文本是由<nav-bar-item> -component 呈现的，所以我必须交出数据。 将它们直接放在<nav-bar-item>组件中将不起作用，因为该项目“不知道”它在整个站点中的内容。

这里的最佳做法是什么？ 交出资料？ 创建全局配置？

谢谢！

Answer 1

您可以做的是在父组件中定义初始数据，这将存储有关导航栏项目的信息。然后您可以迭代它们并使用道具https://v2.vuejs.org/v2/guide/为每个项目发送数据components.html#Props