2.5.2
https://codesandbox.io/s/mzvkppmvo8
它应该可以正常工作
AppSwitcher.vue中的更改导致“在同一渲染树中发现重复存在的插槽“子文本””错误,但没有重复项。
另外,在App.vue的div中添加slot-scope
可以解决问题,并且在那里没有错误,但是为什么没有slot-scope
会发生呢?
你好@ Kelin2025
在v2.5中, scoped-slot
进行了一些更改,您可以在此处进行了解-https : //gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-usage
这可能会解决您的困惑
是的,我知道,但是我不太明白为什么会出现此错误,没有__duplicates__的插槽,只能重新渲染。
看起来范围内的插槽中的一个插槽被渲染了不止一次。
@Justineo它正在重新呈现更改,但它不会引起问题,我认为:thinking:
我的2美分。
这是此问题的另一种形式(https://codesandbox.io/s/m5kl6p97qx)。 请注意,仅在多次显示模态时才会发出警告。
另一方面,同一组件的JSX版本未发出任何警告(https://codesandbox.io/s/k0wpj60z5r)。
我正在经历同样的事情。 任何在插槽范围内触发重新渲染的操作都会引起有关插槽重复存在的警告。
问题似乎在这里。 插槽一次渲染一次后,该块的后续执行将slotNodes._rendered
设为true,大概是从第一次渲染开始。
我想应该会在触发重新渲染时将其设置为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或使用“范围”而不是“插槽范围”:
_ https://vuejs.org/v2/api/#scope -replaced_
希望能像我一样帮助其他人在Google上找到它!
PS。 如果您使用的是Vue.js≤v2.4.x,请记住,您需要使用<template>
元素-您不能仅在任何其他元素上放置slot作用域边界,直到≥2.5 。X。 一个真实的例子:
<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
上遇到此问题。
尝试构建无渲染组件抽象时确实很烦人,因为这种情况经常出现。
最有用的评论
我正在经历同样的事情。 任何在插槽范围内触发重新渲染的操作都会引起有关插槽重复存在的警告。
问题似乎在这里。 插槽一次渲染一次后,该块的后续执行将
slotNodes._rendered
设为true,大概是从第一次渲染开始。我想应该会在触发重新渲染时将其设置为false,但是我承认对Vue的工作原理几乎一无所知,这只是一个疯狂的猜测。
这个错误似乎不太可能发生,但最近发生在我身上几次。 我非常喜欢编写可以与具体实现配对的无渲染组件的模式,并且在出现此问题时尝试将用户的内容传递给具体实现。