VUE.JS

Question

我目前正在尝试创建一个组件来管理页面上的多个 linked 下拉菜单和元素。此外，此元素提供了一个相当奇特的导航元素，包含锚点 links，它会自动滚动到此组件中所需的元素。

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

我看到 3 个选项：

对于添加的每个组件，其标题和唯一 ID 都会添加到 parent 组件的属性数组中。然而，这有点容易出错。（不幸的是，我无法控制最终的后端实现，所以我正在尝试创建一个万无一失的系统以避免浪费太多时间。）
由于其他组件，我已经在使用 Vuex 来管理应用程序中的大部分数据。我想我使用一个简单的指令，添加到 parent 组件中的每个项目上。该指令负责将该元素添加到 Vuex 存储中。 parent 组件简单地读取商店的内容并基于此生成导航。这里的问题是，据我所知，我必须在指令的绑定挂钩中使用 vNode 参数来访问 Vuex 存储。这似乎...... hacky。这种做法有什么问题吗？
在我的 parent 组件的挂载钩子中，我遍历 DOM，搜索具有特定 data-property 的元素，并添加一个 link 将这些元素中的每一个添加到我的导航中。似乎容易失败和脆弱。

这种情况的首选方法是什么？

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

Answer 1

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

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

相反，我会建议使用混合方法，您的混合方法实质上是注册应该包含在 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 钩子将组件注册到 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>

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

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

VUE.JS - Using the vNode argument to add unknown quantity of items to a dynamic navigation

vuejs2

vuex