Vue: "Kehadiran slot ganda" yang tidak terduga

Halo @ Kelin2025

Di v2.5, ada beberapa perubahan di scoped-slot , Anda dapat melihatnya di sini - https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-usage

Ini mungkin menyelesaikan kebingungan Anda

Ya, saya mengetahuinya, tetapi saya tidak begitu mengerti mengapa saya mendapatkan kesalahan ini, tidak ada __duplicates__ slot tetapi hanya rerender.

Sepertinya slot di dalam slot terbatas ditampilkan lebih dari sekali.

@Justineo itu sedang dirender ulang pada perubahan tetapi seharusnya tidak menimbulkan masalah, saya pikir: berpikir:

2 sen saya.

Berikut adalah reproduksi lain dari masalah ini (https://codesandbox.io/s/m5kl6p97qx). Perhatikan peringatan dimunculkan hanya sekali modal ditampilkan lebih dari sekali.

Di sisi lain, versi JSX dari komponen yang sama tidak memunculkan peringatan apapun (https://codesandbox.io/s/k0wpj60z5r).

Saya mengalami hal yang sama. Apa pun yang memicu render ulang di dalam slot-scope menyebabkan peringatan tentang kehadiran slot duplikat.

Masalahnya tampaknya ada di sini di baris ini di sini . Setelah slot diberikan satu kali, eksekusi berikutnya dari blok itu memiliki slotNodes._rendered sebagai true, mungkin dari render pertama.

Saya akan membayangkan sesuatu harus mengaturnya kembali ke false ketika render ulang dipicu, tetapi memang saya hampir tidak tahu apa-apa tentang bagaimana Vue bekerja di bawah tenda jadi itu hanya tebakan liar.

Bug ini sepertinya kasus tepi yang tidak mungkin tetapi terjadi pada saya beberapa kali baru-baru ini. Saya penggemar berat pola penulisan komponen renderless yang dapat dipasangkan dengan implementasi konkret, dan mencoba meneruskan konten dari konsumen ke implementasi konkret adalah saat masalah ini muncul.

coba ini:
komponen-saya:

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

aplikasi:

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

terutama saat "slot" di "v-for"

Perhatikan bahwa jika Anda menggunakan Vue.js ≤v2.4.x, Anda mungkin melihat kesalahan ini jika Anda mencoba menggunakan slot-scope (itulah yang terjadi pada saya).

Solusinya adalah dengan memperbarui Vue.js ke ≥2.5 ATAU gunakan "cakupan" alih-alih "cakupan-slot":

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

Semoga dapat membantu orang lain menemukan ini di Google seperti yang saya lakukan!

PS. Jika Anda menggunakan Vue.js ≤v2.4.x, ingatlah bahwa Anda harus menggunakan elemen <template> - Anda tidak bisa begitu saja menempatkan batas cakupan slot pada elemen lain-lain hingga ≥2.5 .x. Contoh kecil dunia nyata:

      <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>

Solusinya adalah dengan memperbarui Vue.js ke ≥2.5 ATAU gunakan "cakupan" alih-alih "cakupan-slot":

Saya masih memiliki masalah ini di 2.5.17 .

Sangat menjengkelkan ketika mencoba membuat abstraksi komponen renderless, karena ini cukup sering muncul.