VueJS 템플릿에서 동적 이름과 동적 구성 요소를 사용하여 슬롯 목록을 선언하려면 어떻게 해야 합니까?

VueJS 템플릿에서 동적 이름과 동적 구성 요소를 사용하여 슬롯 목록을 선언하려면 어떻게 해야 합니까?

데이터가 있는 성분이 있다고 가정합니다.

data: function () {
  return {
    slots: [
      { Id: 1, slotName: 'apple', componentName: 'Apple' },
      { Id: 2, slotName: 'banana', componentName: 'Banana' }
    ]
  }
}

슬롯 목록을 스코프 슬롯으로 자 컴포넌트에 전달하고 싶습니다.템플릿 요소에서 v-for를 사용할 수 없으므로 다음 구문이 작동하지 않습니다.

<child-component>
    <template v-for="slot in slots" :key="slot.Id" v-slot[slot.slotName]="slotProps">
        <component :is="slot.componentName" :someProp="slotProps"></component>
    </template>
</child-component>

다음 구문은 Vue 2.6.0+에서는 동작하지 않습니다.

<child-component>
    <component v-for="slot in slots" :key="slot.Id"
        :is="slot.componentName" v-slot[slot.slotName]="slotProps" :someProp="slotProps"></component>
</child-component>

다음은 작동하지만 컴파일러는 경고를 보내고 사용되지 않는 구문을 사용합니다.

<child-component>
    <component v-for="slot in slots" :key="slot.Id"
        :is="slot.componentName" :slot="slot.slotName" slot-scope="slotProps" :someProp="slotProps"></component>
</child-component>

사용되지 않는 Vue 템플릿 구문을 사용하여 렌더링 기능을 사용하지 않고 이를 수행할 수 있는 방법이 있습니까?

v-for를 템플릿 구성 요소로 사용할 수 있습니다.

하다, 하다, , 하다를 됩니다.key component.

<child-component>
  <template v-for="slot in slots" v-slot:[slot.slotName]="slotProps">
    <component :key="slot.Id" :someProp="slotProps"></component>
  </template>
</child-component>

슬롯명을 동적으로 생성해야 했습니다.@Ezequiel Fernandez의 대답에 근거해, 다음의 함수를 사용해 실시했습니다.

<template v-for="locale in locales" v-slot:[getSlotName(locale)]="slotProps">
 ...
</template>

data() {
  return {
    locales: ['en', 'fr']
  }
},
methods: {
  getSlotName(locale) {
    return `locale-${locale}`
  }
}

언급URL : https://stackoverflow.com/questions/57156543/how-to-declare-a-list-of-slots-with-dynamic-names-and-dynamic-components-in-a-vu