Vue: 예기치 않은 "중복 된 슬롯 존재"

안녕하세요 @ Kelin2025

V2.5에서의 약간의 변화가 있었다 scoped-slot -, 당신은 여기를 통해 갈 수 https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped 슬롯-사용

이것은 당신의 혼란을 해결할 수 있습니다

예, 알고 있지만 왜이 오류가 발생하는지 이해하지 못합니다. 슬롯에 __duplicates__가없고 rerender 만 있습니다.

범위가 지정된 슬롯 내부의 슬롯이 두 번 이상 렌더링 된 것 같습니다.

@Justineo 변경 사항에 대해 다시 렌더링되고 있지만 문제를 일으키지 않아야합니다.

내 2 센트.

다음은이 문제의 또 다른 재현입니다 (https://codesandbox.io/s/m5kl6p97qx). 모달이 두 번 이상 표시된 경우에만 경고가 발생합니다.

반면, 동일한 구성 요소의 JSX 버전은 경고를 발생시키지 않습니다 (https://codesandbox.io/s/k0wpj60z5r).

저도 같은 일을 겪고 있습니다. 슬롯 범위 내에서 다시 렌더링을 트리거하는 모든 항목은 중복 슬롯 존재에 대한 경고를 발생시킵니다.

문제는 여기이 줄에있는 것 같습니다 . 슬롯이 한 번 렌더링되면 해당 블록의 후속 실행은 아마도 첫 번째 렌더링에서 slotNodes._rendered 참으로됩니다.

다시 렌더링이 트리거 될 때 무언가가 다시 거짓으로 설정되어야한다고 생각하지만, Vue가 내부에서 어떻게 작동하는지에 대해서는 거의 알지 못하기 때문에 추측 일뿐입니다.

이 버그는 가능성이 희박한 케이스처럼 보이지만 최근에 몇 번 나에게 발생했습니다. 저는 구체적인 구현과 짝을 이룰 수있는 렌더리스 구성 요소를 작성하는 패턴의 열렬한 팬이며,이 문제가 발생할 때 소비자의 콘텐츠를 구체적인 구현으로 전달하려고합니다.

이 시도:
내 구성 요소 :

<template>
    <slot :someprop="value"></slot>
</template>

앱:

<my-component>
    <template slot-scop="someprop">{{ prop }} ... and do something else</template>
</my-component>

특히 "v-for"의 "slot"이

Vue.js ≤v2.4.x를 사용하는 경우 slot-scope 를 사용하려고하면이 오류가 표시 될 수 있습니다 (그게 저에게 일어난 일입니다).

해결책은 Vue.js를 ≥2.5로 업데이트하거나 "슬롯 범위"대신 "범위"를 사용하는 것입니다.

_ https://vuejs.org/v2/api/#scope -replaced_

내가 한 것처럼 다른 사람이 Google에서 이것을 찾는 데 도움이되기를 바랍니다.

추신. Vue.js ≤v2.4.x를 사용하는 경우 <template> 요소를 사용해야합니다. ≥2.5가 될 때까지 기타 요소에 슬롯 범위 경계를 지정할 수 없습니다. .엑스. 실제 사례 :

      <div class="form-group col-md">
        <label>Autocomplete field 4 (w/ custom search results):</label>
        <autocomplete v-model="autocompleteExampleValue4" action="listGlobalSearchResults" :handle-formatting-response-data="handleFormattingDummySearchResults" placeholder="This one has a custom placeholder too">
          <template slot="search-result-item" scope="slotData"><!-- Note that you can use destructuring here, but it only works in modern browsers -- otherwise you have to define a separate variable -- like scope="slotData" and then use {{slotData.id}}... (see https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope) -->
            <!-- TODO: update to vue ≥ 2.5.0 to allow this slotData thing to be attached w/o using a template element.  Also when we do that, "scope" will become "slot-scope".  See https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots for more info -->
            <span>{{slotData.searchResult.label}}</span>
          </template>
        </autocomplete>
      </div>

해결책은 Vue.js를 ≥2.5로 업데이트하거나 "슬롯 범위"대신 "범위"를 사용하는 것입니다.

2.5.17 에서 여전히이 문제가 발생합니다.

렌더리스 컴포넌트 추상화를 만들려고 할 때 정말 짜증이납니다.