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

2023年10月7日 744次阅读

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

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

我看到3个选项：

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

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

作为后续问题 – vue指令中vNode参数的正确用例是什么？关于这个问题,文件似乎相当稀少.

最佳答案 在这种情况下,我会避免使用指令.在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.

相反,我建议使用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,并在组件的定义中混合使用计算属性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相对简单.

点赞