VUE.JS - vNode 인수를 사용하여 알 수 없는 수량의 항목을 동적 탐색에 추가

VUE.JS - vNode 인수를 사용하여 알 수 없는 수량의 항목을 동적 탐색에 추가

현재 페이지의 여러 링크된 드롭다운과 요소를 관리하는 구성 요소를 생성하려고 합니다.또한 이 요소는 이 컴포넌트의 원하는 요소로 자동으로 스크롤되는 앵커링크를 포함하는 다소 화려한 네비게이션 요소를 제공합니다.

문제는 컴포넌트의 실제 내용이 완전히 동적이고 CMS의 콘텐츠 매니저에 의해 부분적으로 결정된다는 것입니다.항상 존재하는 서브 컴포넌트가 몇 개 있지만 콘텐츠 매니저가 (다양한 이름 및 이름 없는) 섹션을 얼마든지 추가할 수 있다는 것 외에 이들 각 섹션을 추가해야 합니다.컴포넌트 내비게이션으로 이동합니다.

3가지 옵션이 있습니다.

1. 추가된 모든 구성 요소에 대해 해당 구성 요소의 제목과 고유 ID가 상위 구성 요소의 속성 배열에 추가됩니다.그러나 이는 오류가 발생하기 쉽습니다(불행하게도 최종적인 백엔드 구현에 대한 제어가 불가능하기 때문에 많은 시간을 낭비하지 않기 위해 완벽한 시스템을 구축하려고 합니다).

2. 다른 컴포넌트 때문에 이미 Vuex를 사용하여 앱의 대부분의 데이터를 관리하고 있습니다.부모 컴포넌트의 각 항목에 추가되는 간단한 지시문을 사용하기로 했습니다.이 지시어는 Vuex 저장소에 해당 요소를 추가하는 역할을 합니다.부모 컴포넌트는 스토어의 내용을 읽고 이를 기반으로 내비게이션을 생성합니다.여기서 문제는 Vuex 스토어에 액세스하려면 디렉티브의 바인드훅에 vNode 인수를 사용해야 한다는 것입니다.이거는...이 접근법에 무슨 문제라도 있나요?

3. 부모 컴포넌트의 마운트 후크에서 DOM을 트래버스하여 특정 데이터 속성을 가진 요소를 검색하고 이들 각 요소에 대한 링크를 내비게이션에 추가합니다.실패하기 쉽고 깨지기 쉬운 것 같아요.

이 상황에서 바람직한 접근법은 무엇입니까?

후속 질문 - vue 지침의 vNode 인수에 대한 올바른 사용 사례는 무엇입니까?그 문서는 이 주제에 대해 다소 희박한 것 같다.

나는 이 경우에 지시를 사용하는 것을 자제할 것이다.Vue 2에서 디렉티브의 주요 사용 사례는 낮은 수준의 DOM 조작입니다.

Vue 2.0에서는 코드 재사용 및 추상화의 주요 형태는 컴포넌트입니다.단, 플레인 요소에 대한 낮은 수준의 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
    })
  }
}

이 믹스인은 네비게이션에 사용할 요소와 컴포넌트의 제목을 결정하는 몇 가지 계산값을 정의합니다.제목은 플레이스 홀더이므로 필요에 따라 수정해야 합니다.마운트된 후크는 구성 요소를 Vue에 등록합니다.구성 요소에 사용자 지정 제목 또는 navElement가 필요한 경우 계산된 속성에 혼합된 항목은 구성 요소의 정의에 의해 재정의됩니다.

다음으로 컴포넌트를 정의하고 믹스인을 사용합니다.

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

여기서는 세 번째 컴포넌트에 믹스인을 추가하지 않습니다.모든 컴포넌트가 내비게이션에 포함되지 않는 상황을 생각할 수 있기 때문입니다.

다음은 사용 방법의 간단한 예입니다.

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>

이 솔루션은 매우 견고합니다.해석할 필요가 없습니다.네비게이션에 추가할 컴포넌트를 제어할 수 있습니다.내포될 수 있는 구성요소를 처리합니다.어떤 종류의 컴포넌트가 추가될지는 모르지만 사용할 컴포넌트의 정의를 제어할 수 있어야 합니다.즉, 믹스인을 포함시키는 것은 비교적 간단합니다.

언급URL : https://stackoverflow.com/questions/44452344/vue-js-using-the-vnode-argument-to-add-unknown-quantity-of-items-to-a-dynamic