Vue.js v2의 자 컴포넌트 동적 렌더링

Vue.js v2의 자 컴포넌트 동적 렌더링

VueJs에 전면 검색 시스템을 구축하고 있어요일반적인 생각은 다음과 같습니다.

A FilterGroupcomponent에는 전체 필터 로직이 포함됩니다.이 구성 요소에는 다양한 하위 구성 요소(예:AttributeXYZFilter이러한 하위 구성요소는 다음과 같은 조건을 제공할 책임이 있습니다.FilterGroup를 사용하여 항목 컬렉션을 필터링합니다.

이 시스템의 사용 예는 다음과 같습니다.

<template>
  <FilterGroup :items="items">
    <ABCFilter/>
    <XYZFilter/>
    <AnotherFilter/>
  </FilterGroup>
</template>

문제는 다음과 같습니다.

필터 컴포넌트는 다음과 같이 렌더링해야 합니다.FilterGroup특정 레이아웃에 있습니다.또한.FilterGroup는 필터 컴포넌트에 소품을 사용하여 몇 가지 추가 데이터를 제공해야 합니다.

불필요한 결합을 방지하기 위해FilterGroup는 어떤 필터가 렌더링되는지 알 수 없습니다.각 필터는 공통 사양/인터페이스에 준거합니다(믹스인을 사용해 실장).각 필터에는 고유한 UI 템플릿이 있습니다.

어떻게 구현하면 좋을까요?

슬롯을 사용하려고 했지만 하위 구성 요소를 사용자 지정하는 방법을 찾을 수 없습니다.슬롯을 사용하지 않을 경우this.$children비어있어서 어떤 필터를 렌더링해야 할지 모르겠어요.

다음과 같은 필터를 제공할 수 있습니다.

<template>
  <FilterGroup :items="items" :filters="['ABCFilter', 'XYZFilter']/>
</template>

그리고나서FilterGroup는 필터 컴포넌트를 동적으로 Import 및 렌더링할 수 있습니다.추가 데이터 전달도 가능합니다.그러나 결과 API는 가독성이 떨어지고 개발자 친화적이라고 생각합니다.

더 좋은 방법이 있을까요?

당신은 그것을 위해 동적 컴포넌트를 사용하고 싶다고 생각합니다.이를 통해 데이터를 기반으로 (자) 구성 요소를 동적으로 렌더링할 수 있습니다.이 예에서는 필터가 사용됩니다.

그:is="ComponentName"에 렌더링해야 할 컴포넌트를 정의합니다.를 사용하다props데이터를 전달하려면:

<template>
    <div class="app-body row">
        <template v-for="(child, index) in children">
            <component :is="child.viewName" :key="child.name" :data="child.data"></component>
        </template>
    </div>
</template>

스코프 슬롯을 사용하면 문제가 해결됩니까?그런 다음 하위 구성 요소를 사용자 정의할 수 있습니다.JSFiddle

Vue.component('filter-group', {
  template: `
  <div class="filter-group">
    <slot :items="items">
    </slot>
  </div>
  `,
  data: function() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  }
})

Vue.component('filter-a', {
  template: `
  <div class="filter-a">
    filter a: {{ items }}
  </div>
  `,
  props: ['items']
})

Vue.component('filter-b', {
  template: `
  <div class="filter-b">
    filter b: {{ items }}
  </div>
  `,
  props: ['items']
})

new Vue({
  el: '#app'
})

언급URL : https://stackoverflow.com/questions/48254438/dynamically-rendering-child-components-in-vue-js-v2