Vue에서 모든 소품을 어린이에게 전달

이 글은 myblog에도 게재되어 있습니다.

몇 가지 새로운 Vue 구성 요소를 브레인스토밍하는 동안 저는 단일 래퍼 구성 요소가 하위 보기에 필요한 모든 데이터를 가져오고 해당 데이터를 하위(약 5개의 레이어)를 통해 아래로 전달할 수 있는 방법을 원했습니다.

그래서 몇 가지 실험을 했고 여기에 모든 구성 요소 소품을 하위 구성 요소를 통해 전달하는 방법이 있습니다. Link to codepen .

Vue는 실제로 이것을 매우 쉽게 만듭니다. 모든 구성 요소 소품은 $props 개체(템플릿에 없는 경우 this.$props)에서 사용할 수 있으며 특정 소품 이름을 지정하지 않고 Vue 지시문v-bind을 사용하여 소품의 전체 개체를 바인딩할 수 있습니다. 아이에게.

예시

자식comp1 구성 요소를 렌더링하고 소품으로 propForComp1 및 propForComp2를 전달하는 일부 래퍼 구성 요소가 있다고 가정해 보겠습니다.

다음은 Comp1.vue입니다.

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
    <comp2 v-bind="$props" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1',
      'propForComp2'
    ],
  }
</script>

comp1 는 propForComp1 만 사용하고 propForComp2 는 별로 신경쓰지 않습니다. 그러나 comp2에 전달된 props에 포함되어야 하므로 propForComp2는 여전히 props 개체 내에서 선언되어야 합니다. 그렇지 않으면 $props에 포함되지 않습니다.

여러 수준의 구성 요소에 대해 이 작업을 수행할 수 있지만 자식에 필요한 소품은 모든 부모에서 선언해야 합니다. 따라서 5개의 레이어가 있는 경우 propForComp5 는 prop1 , prop2 , prop3 , prop4 및 prop5 에서 prop으로 선언되어야 합니다. codepen 에서 내가 택한 경로인 Mixin을 사용하여 이것을 조금 더 쉽게 만들 수 있습니다.

업데이트: 실제로 이 마지막 비트를 수행할 필요가 없습니다! Vue가 $props를 포기하는 것처럼 $attrs 객체에는 구성 요소가 소품으로 선언하지 않은 전달된 모든 속성이 포함됩니다. 즉, 구성 요소가 자체적으로 지정하지 않더라도 v-bind="$attrs"를 사용하여 자식이 관심을 가질만한 속성을 전달할 수 있습니다.

이전 예제는 다음과 같이 바뀝니다.

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
    <comp2 v-bind="$props" v-bind="$attrs" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1'
    ],
  }
</script>

변경 사항을 확인하기 위한 diff:

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
-   <comp2 v-bind="$props" />
+   <comp2 v-bind="$props" v-bind="$attrs" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1',
-     'propForComp2'
    ],
  }
</script>

덕분에
이것을 지적하기 위해!