동적 Vue 구성 요소에 도구 전달

이 문장도 나의 blog에 발표되었다.
두뇌 폭풍이 새로운 Vue 구성 요소 (듣기에는 familiar 일 때, 나는 하나의 항목 목록을 순환하고 모든 항목의 동태에 정확한 구성 요소를 보여주는 것이 가장 좋다고 생각한다.문제는 렌더링된 구성 요소가 사용하는 도구가 다르다는 것이다.
면책 성명: 이 문장은 나의 이전 문장보다 좀 복잡하다.저는 귀하가 Vue 구성 요소의 기초 지식을 알고 현대 JS 모델에 대해 좀 알고 있다고 가정합니다(예를 들어 Array.map.
Vue에서는 항목 목록을 순환하고 각 항목에 구성 요소를 보여주는 것이 흔합니다.일반적으로 렌더링할 어셈블리를 지정하고 템플릿에 태그v-for를 추가하여 수행합니다.

<!-- Contacts.vue -->
<template>
  <contact-card
    v-for="person in people"
    :key="person.id"
    :contact="person" />
</template>

<script>
  import ContactCard from 'ContactCard.vue'

  export default {
    components: {
      ContactCard,
    },
    props: {
      people: {
        type: Array,
        default: () => [],
      }
    }
  }
</script>

이것은 Vue 애플리케이션에서 흔히 볼 수 있는 매우 간단한 모델입니다.위의 예에서 우리는 한 사람의 연락처를 표시하는 데 사용되는 구성 요소ContactCard가 있다.우리 자세히 ContactCard.vue보고 무슨 일이 일어났는지 알아봅시다.

<!-- ContactCard.vue -->
<template>
  <article>
    <h1>{{ contact.name }}</h1>
    <ul>
      <li>Phone: {{ contact.phone }}</li>
      <li>Email: {{ contact.email }}</li>
    </ul>
  </article>
</template>
...

보시다시피, 연락처의 상세한 정보를 표시하기 위한 아주 기본적인 구성 요소가 있습니다.루트 레벨은article 태그(yay HTML5)로 이 사람의 이름과 연락처가 포함된 무질서한 목록입니다.미친 건 아니지만 필요한 도구가 있어요contact.

동적 구성 요소
우리가 더 많은 응용 프로그램을 구축할 때, 우리는 연락처를 만드는 것을 포함하여 시스템에 데이터를 추가하는 순서를 표시하는 시간표를 추가하는 것을 고려할 것이다.연결 정보를 표시하는 데 사용되는 강력한 구성 요소가 있기 때문에, 이 시간축 보기에서 다시 사용하기로 결정했습니다.새로운 구성 요소를 봅시다.

<!-- Timeline.vue -->
<template>
  <contact-card
    v-for="item in history"
    :key="item.id"
    :contact="item" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'

  export default {
    components: {
      ContactCard,
    },
    computed: {
      history () {
        return historyArray
      },
    },
  }
</script>

언뜻 보기에 Timeline 부품이 아주 좋아 보일 수도 있다.하지만 historyArray의 구조를 살펴보자.

[
  {
    id: 'contact-1',
    isContactItem: true,
    ...
  },
  {
    id: 'event-1',
    isSystemEventItem: true,
    ...
  },
  {
    id: 'contact-2',
    isContactItem: true,
    ...
  },
]

자세히 살펴보면 이러한 역사 데이터 중에는 단지'연락인'만 있는 것이 아니라는 것을 알 수 있다.사실상, 우리는 연락처와 시스템 이벤트를 표시해야 한다.다행히도, 누군가가 SystemEvent 구성 요소를 만들었기 때문에, 우리는 이렇게 할 필요가 없다.우리ContactCard와 매우 비슷합니다. 이 구성 요소는 필요한 도구(이 예는event가 있고 이 도구에 대한 정보를 표시합니다.따라서 목록에 있는 항목마다 어떤 구성 요소를 사용할지 동적으로 결정하기 위해 Timeline 구성 요소를 변경합니다.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    :contact="item" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'
  import SystemEvent from 'SystemEvent.vue'

  export default {
    components: {
      ContactCard,
      SystemEvent,
    },
    computed: {
      history () {
        return historyArray.map(historyItem => {
          if (historyItem.isContactItem) {
            // Return a new object that contains ALL keys
            // from `historyItem` and adds a `component` key
            return {
              ...historyItem,
              component: ContactCard,
            }
          } else if (historyItem.isSystemEventItem) {
            return {
              ...historyItem,
              component: SystemEvent,
            }
          }
        })
      },
    },
  }
</script>

템플릿에 지정한 contact-card 이 아닌 component 라는 특수 표시를 사용합니다.이외에도 새로운 is 아이템이 전달되고 있다.history 계산 값 내부에서, 우리는 모든 항목이 연락처인지 시스템 이벤트 항목인지 확인하고, 특정한 항목에 렌더링할 관련 구성 요소를 포함하는 키를 추가합니다. component템플릿 내의 순환 중is 아이템이 component키에 귀속됩니다.결과적으로 연락처 항목은 ContactCard 구성 요소를 나타내고 시스템 이벤트 항목은 SystemEvent 구성 요소를 나타낸다.
주의: Vue docs 의 component 라벨을 읽을 수 있습니다.
주의를 기울이면 작은 문제를 발견할 수 있습니다. SystemEvent 구성 요소는 event 라는 도구를 받아들이지만, 템플릿은 현재 contact 라는 도구를 전달하고 있습니다.우리는 어떻게 해야만 이런 상황을 피할 수 있습니까?하나의 선택은 contact과 event 도구를 각 구성 요소에 전달하는 것이다.기술적으로는 문제가 되지 않지만 혼란스럽다.어쨌든 그게 어떻게 될지 봅시다.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    :contact="item"
    :event="item" />
</template>

...

현재 목록의 모든 구성 요소가 전달됩니다. contact 와 event.그것들은 모두 같은 변수를 전달하기 때문에 ContactCard 구성 요소는 contact 도구를 보고 정확하게 조작할 것이며, SystemEvent 구성 요소는 event 도구를 보고 정확하게 조작할 것이다.이것은 아주 잘 작동할 것이다. 그러나 네가 상상할 수 있는 바와 같이, 만약 우리가 도구가 필요한 부품이 많다면, 그것은 곧 제어를 잃을 수도 있다.더 좋은 방법이 있을 거야...

동적 도구
잠깐만!만약 우리가 보여줄 구성 요소를 동태적으로 성명한다면, 이 구성 요소가 어떤 도구를 받아야 하는지 동태적으로 성명할 수 없습니까?만약 당신이 나의 last Vue post를 읽었다면, 당신은 v-bind이 한 번에 한 세트의 아이템을 귀속할 수 있다는 것을 이미 알고 있습니다.그럼 여기서 응용할 수 있는지 확인해 봅시다.
주의: Vue docs에서 v-bind 전달 대상의 속성에 대한 정보를 더 많이 읽을 수 있습니다.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    v-bind="item.props" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'
  import SystemEvent from 'SystemEvent.vue'

  export default {
    components: {
      ContactCard,
      SystemEvent,
    },
    computed: {
      history () {
        return historyArray.map(historyItem => {
          if (historyItem.isContactItem) {
            // Return a new object that contains a `component`
            // key, an `id` key, and a `props` object
            return {
              id: historyItem.id,
              component: ContactCard,
              props: {
                contact: historyItem,
              },
            }
          } else if (historyItem.isSystemEventItem) {
            return {
              id: historyItem.id,
              component: ContactCard,
              props: {
                event: historyItem,
              },
            }
          }
        })
      },
    },
  }
</script>

그래, 우리 history 가 값을 계산하는 함수가 미치기 시작했다는 것을 알지만, 그것은 정말 큰 작용이 없었다.이해하기 어려운 경우 다음은 생성된 데이터 구조가 어떤 것인지 보여주는 예입니다.

[
  {
    id: 'contact-1',
    component: ContactCard,
    props: {
      contact: {...}
    }
  },
  {
    id: 'event-1',
    component: SystemEvent,
    props: {
      event: {...}
    }
  },
  {
    id: 'contact-2',
    component: ContactCard,
    props: {
      contact: {...}
    }
  }
]

이제 history가 어떻게 구성되었는지 알았으니 이 틀을 다시 보세요.주의, contact와 event 아이템이 제거되었습니다. 우리는 하나v-bind 아이템만 있습니다.우리가 제시한 값 v-bind 은 item.props 이며, 위의 코드 세션에 따라 모든 구성 요소에 적합한 속성을 포함할 것입니다.이것은 이전의 방법보다 더욱 간결하고 템플릿을 쉽게 읽을 수 있게 한다.구성 요소의 차이가 더 크면 history 논리는 여러 기능으로 분해되기 쉽다.

요약
때때로 항목 목록에서 순환할 때 표시할 구성 요소를 동적으로 선택해야 합니다.VueJS는 이를 잘 지원하고 component 표시를 사용하는 것도 쉽다.복잡성이 증가함에 따라 구성 요소는 전체 응용 프로그램에서 반복적으로 사용되기 시작했고, 이 구성 요소들은 서로 호환되지 않는 프로그래밍 인터페이스를 가지고 있을 수 있다.도구를 구성 요소에 동적으로 연결합니다. 동적 성명에서 사용할 구성 요소와 같이 템플릿의 청결성과 가독성을 유지하는 데 도움이 됩니다.