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

Question

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

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

我看到 3 个选项:

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

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

3. 在我的父组件的挂载 Hook 中，我遍历 DOM，搜索具有特定数据属性的元素，并将指向这些元素中的每一个的链接添加到我的导航中。似乎容易失败且脆弱。

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

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

Answer 1

在这种情况下，我会避免使用指令。在 Vue 2 中，指令的主要用例是低 level DOM manipulation。 .

Note that in Vue 2.0, the primary form of code reuse and abstractionis components - however there may be cases where you just need somelow-level DOM access on plain elements, and this is where customdirectives would still be useful.

相反，我会建议一种 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 定义了几个计算值，这些值确定应该用于导航的元素和组件的标题。显然标题是一个占位符，您应该修改它以满足您的需要。 mounted 钩子(Hook)将组件注册到 Vue。组件是否需要自定义标题或 navElement，混合在计算属性中 are overridden根据组件的定义。

接下来我定义我的组件并使用 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>`
})

请注意，这里我没有将 mixin 添加到第三个组件，因为我可以设想这样一种情况，您可能不希望导航中包含所有组件。

这是一个简单的用法示例。

console.clear()

const store = new Vuex.Store({
  state: {
    links: []
  },
  mutations: {
    addLink (state, link) {
      state.links.push(link)
    }
  }
})

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
    })
  }
}

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>`
})

Vue.component("container",{
  template:`
    <div>
      <button v-for="link in $store.state.links" @click="scroll(link)">{{link.title}}</button>
      <slot></slot>
    </div>
  `,
  methods:{
    scroll(link){
      document.querySelector("body").scrollTop = link.element.offsetTop
    }
  },
})

new Vue({
  el:"#app",
  store
})

h1{
  height:300px
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>
<div id="app">
  <container>
    <child1></child1>
    <child3></child3>
    <child2></child2>
  </container>
</div>

这个解决方案非常强大。你不需要解析任何东西。您可以控制将哪些组件添加到导航中。您处理潜在的嵌套组件。你说你不知道将添加哪些类型的组件，但是你应该控制将要使用的组件的定义，这意味着它相对简单包括混音。