Vue: Неожиданное «повторяющееся присутствие слота»

Привет @ Kelin2025

В v2.5 произошли некоторые изменения в scoped-slot , вы можете просмотреть их здесь - https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-usage

Это может решить вашу проблему

Да, я знаю это, но я действительно не понимаю, почему я получаю эту ошибку, нет __duplicates__ слота, а только повторная визуализация.

Похоже, слот внутри слота с заданной областью визуализации отображается более одного раза.

@Justineo он перерисовывается при изменениях, но это не должно вызывать проблем, я думаю: думаю:

Мои 2 цента.

Вот еще одно воспроизведение этой проблемы (https://codesandbox.io/s/m5kl6p97qx). Обратите внимание, что предупреждение появляется только после того, как модальное окно отображается более одного раза.

С другой стороны, JSX-версия того же компонента не вызывает никаких предупреждений (https://codesandbox.io/s/k0wpj60z5r).

Я испытываю то же самое. Все, что вызывает повторный рендеринг внутри области видимости слота, вызывает предупреждение о наличии дублирующегося слота.

Кажется, проблема здесь, в этой строке . После того, как слоты были отрисованы один раз, последующие исполнения этого блока имеют значение slotNodes._rendered как истинное, предположительно с первого рендеринга.

Я бы предположил, что что-то должно вернуть это значение в false при запуске повторного рендеринга, но, по общему признанию, я почти ничего не знаю о том, как Vue работает под капотом, так что это просто дикая догадка.

Эта ошибка кажется маловероятным крайним случаем, но недавно она случилась со мной пару раз. Я большой поклонник шаблона написания компонентов без рендеринга, которые могут быть объединены с конкретными реализациями, и когда возникает эта проблема, я пытаюсь передать контент от потребителя в конкретную реализацию.

попробуй это:
мой компонент:

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

приложение:

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

особенно когда "слот" в "v-for"

Обратите внимание: если вы используете Vue.js ≤v2.4.x, вы можете увидеть эту ошибку, если пытаетесь использовать slot-scope (это то, что происходило со мной).

Решение состоит в том, чтобы либо обновить Vue.js до ≥2,5, либо использовать "scope" вместо "slot-scope":

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

Надеюсь, что это поможет кому-нибудь еще найти это в Google, как и я!

PS. Если вы используете 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, либо использовать "scope" вместо "slot-scope":

У меня все еще есть эта проблема с 2.5.17 .

Это действительно раздражает, когда вы пытаетесь создать абстракции компонентов без рендеринга, так как это происходит довольно часто.