VUE.JS-使用vNode参数向动态导航添加未知数量的项

我目前正在尝试创建一个组件，用于管理页面上的多个链接下拉列表和元素。此外，该元素还提供了一个相当奇特的导航元素，其中包含自动滚动到此组件中所需元素的锚链接

问题是组件的实际内容完全是动态的，部分由CMS中的内容管理器决定。有几个始终存在的子组件，但除此之外，content manager可以添加任意数量的节（使用各种命名和未命名），并且这些节中的每一节都应添加到组件的导航中

我看到3种选择：

对于添加的每个组件，其标题和唯一id将添加到父组件的属性数组中。然而，这有点容易出错。（不幸的是，我无法控制最终的后端实现，因此我正在尝试创建一个万无一失的系统，以避免浪费太多时间。）

由于其他组件的原因，我已经在使用Vuex来管理应用程序中的大部分数据。我想我使用了一个简单的指令，添加到父组件中的每个项上。此指令负责将该元素添加到Vuex存储。父组件只是读取存储的内容并基于此生成导航。 这里的问题是，据我所知，我必须在指令的bind hook中使用vNode参数来访问Vuex存储。这似乎。。。哈奇。这种方法有什么问题吗

在父组件的挂载钩子中，我遍历DOM，搜索具有特定数据属性的元素，并将这些元素的链接添加到导航中。似乎容易失败和脆弱

对于这种情况，首选的方法是什么

---

作为后续问题-vue指令中vNode参数的正确用例是什么？关于这个主题的文档似乎比较少。

在这种情况下，我会避免使用指令。在Vue 2中，指令的主要使用情形是低端指令

请注意，在Vue 2.0中，代码重用和抽象的主要形式 is组件-但是在某些情况下，您可能只需要一些组件 对普通元素的低级DOM访问，这是自定义 指令仍然是有用的

相反，我建议使用mixin方法，在这种方法中，mixin基本上注册应该包含在Vuex导航中的组件

考虑以下代码

const NavMixin = {
  computed:{
    navElement(){
      return this.$el
    },
    title(){
      return this.$vnode.tag.split("-").pop()
    }
  },
  mounted(){
    this.$store.commit('addLink', {
      element: this.navElement,
      title: this.title
    })
  }
}

这个mixin定义了两个计算值，它们确定了应该用于导航的元素和组件的标题。显然，标题是一个占位符，您应该修改它以满足您的需要。安装的挂钩将组件注册到Vue。组件是否需要自定义标题或navElement，由组件的定义混合在计算属性中

接下来，我定义我的组件并使用mixin

Vue.component("child1",{
  mixins:[NavMixin],
  template:`<h1>I am child1</h1>`
})
Vue.component("child2",{
  mixins:[NavMixin],
  template:`<h1>I am child2</h1>`
})
Vue.component("child3",{
 template:`<h1>I am child3</h1>`
})

当您说您无法控制添加到组件中的内容时，我假设您的意思是CMS正在呈现一个模板，其中可以添加任意数量的子组件？是的，但我也不知道将添加哪些类型的组件。对于特殊情况，客户完全有可能（甚至有可能）希望超出初始线框的边界，并期望快速解决方案。所以我必须创造一个尽可能开放和流动的系统。