Vue: 意外的“重复存在广告位”

创建于 2018-03-28  ·  9评论  ·  资料来源: vuejs/vue

2.5.2

复制链接

https://codesandbox.io/s/mzvkppmvo8

重现步骤

  1. 我创建了具有作用域插槽(AppSwitcher.vue)的组件
  2. 然后,在具有自己插槽的另一个组件中使用它(带有插槽“ subtext”的HelloWorld.vue)
  3. 向插槽添加一些元素(App.vue中的div)

期望什么?

它应该可以正常工作

实际发生了什么?

AppSwitcher.vue中的更改导致“在同一渲染树中发现重复存在的插槽“子文本””错误,但没有重复项。


另外,在App.vue的div中添加slot-scope可以解决问题,并且在那里没有错误,但是为什么没有slot-scope会发生呢?

bug has PR

最有用的评论

我正在经历同样的事情。 任何在插槽范围内触发重新渲染的操作都会引起有关插槽重复存在的警告。

问题似乎在这里。 插槽一次渲染一次后,该块的后续执行将slotNodes._rendered设为true,大概是从第一次渲染开始。

我想应该会在触发重新渲染时将其设置为false,但是我承认对Vue的工作原理几乎一无所知,这只是一个疯狂的猜测。

这个错误似乎不太可能发生,但最近发生在我身上几次。 我非常喜欢编写可以与具体实现配对的无渲染组件的模式,并且在出现此问题时尝试将用户的内容传递给具体实现。

所有9条评论

你好@ 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或使用“范围”而不是“插槽范围”:

image
_ 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上遇到此问题。

尝试构建无渲染组件抽象时确实很烦人,因为这种情况经常出现。

此页面是否有帮助?
0 / 5 - 0 等级