VueJs의 동적 컴포넌트에 동적 소품을 결합하는 방법 2

VueJs의 동적 컴포넌트에 동적 소품을 결합하는 방법 2

컴포넌트 이름 목록(API 서버에 대한 AJAX 호출에서 가져온 것)을 컴포넌트로 렌더링하고 관련 속성을 각 컴포넌트에 동적으로 바인드하는 방법을 알고 싶습니다.

지금까지 컴포넌트를 나타내는 항목의 JSON 목록을 반복하여 이들 컴포넌트를 정상적으로 렌더링했습니다.이제 각 컴포넌트의 속성을 바인드합니다.v-bind.

다음 예에서는item-one컴포넌트가 수신하다image의 소유물건item1.jpg값 및item-two컴포넌트가 속성을 수신하지 않습니다.

<template>
  <div v-for="item in items">
    <component :is="Object.keys(item)[0]" :v-bind="???"></component>
  </div>
</template>

<script>
  import ItemOne from '../components/item-one'
  import ItemTwo from '../components/item-two'

  export default {
    components: {
      ItemOne,
      ItemTwo
    },
    asyncData () {
      return {
        items: [
          { 'item-one': { 'image': 'item1.jpg' } },
          { 'item-two': { } }
        ]
      }
    }
  }
</script>

나는 그것을 사용해봤어요.:v-bind="Object.values(Object.keys(item)[0])"하지만 나는 그 속성을 이해한다.v-bind="[object Object]"참조할 수 있습니다.

먼저 결장을 제거하고 나서v-bind대장은 의 단수입니다v-bindAtribute에 프리픽스가 붙을 경우.단, 바인드할 키쌍의 오브젝트를 전달할 때는 단순히v-bind지시.

둘째, 각 항목의 속성을 올바르게 참조하고 있지 않습니다.다음과 같이 참조할 수 있습니다.

v-bind="item[Object.keys(item)[0]]"

---

사용할 필요가 없습니다.Object.keys그 구조를 바꾸면items속성:

items: [{ 
  type: 'item-one', 
  props: { 'image': 'item1.jpg' },
}, {
  type: 'item-two',
}]

이 방법으로 컴포넌트 유형과 속성을 사전에 명시적으로 라벨로 표시함으로써 템플릿을 이해하기 쉬워집니다.

<div v-for="item in items">
  <component :is="item.type" v-bind="item.props"></component>
</div>

언급URL : https://stackoverflow.com/questions/43929099/how-to-bind-dynamic-props-to-dynamic-components-in-vuejs-2