在这种情况下如何解决重复插槽的存在？ [视觉]

Question

目前我收到这个错误：

Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.

虽然有一些关于如何解决这个问题的例子，但我不知道如何解决这个问题。

这是我在搜索组件的 PHP 文件中使用的标记。

<search>
    <form action="#" class="form-inline">
        <div class="form-group">
            <label for="number_persons">Persons</label>

            <select class="form-control" name="num_persons">
                <etc>
            </select>
        </div><!-- /.form-group -->
    </form>
</search>

我的 .vue 搜索组件有一个如下所示的模板：

<template>
    <div class="item" v-for="item in items">
        <div class="alert alert-warning" v-show="prices">
            <slot></slot>
        </div>

        <pagination></pagination>
    </div><!-- /.items -->
</template>

从文档中我看到您要使用诸如作用域插槽之类的东西？我已经尝试实施它们，但我无法让它发挥作用。我只是尝试将范围添加到 PHP 文件和 vue 组件中的 form。

任何人都可以告诉我在这种情况下使用什么语法吗？

来自@Cobaltway 的更新示例

https://jsfiddle.net/31x0cy2p/1/

Answer 1

对于作用域插槽，父级中具有属性作用域的 <template> 元素似乎是强制性的，如第三个示例 here 中所指定。它必须是一个模板元素，它不能与任何其他元素一起使用。

In the parent, a <template> element with a special attribute scope indicates that it is a template for a scoped slot. The value of scope is the name of a temporary variable that holds the props object passed from the child.

Vue.component('search', {
  template: `
    <div>
      <div v-for="n in 10">
        <slot :text="n"></slot>
      </div>
    </div>`
});

new Vue({el:'#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <search>
    <template scope="props">
        <form action="#">
            <div>
                <label for="number_persons">Person {{ props.text }}</label>
                <select name="num_persons"></select>
            </div>
        </form>
    </template>
  </search>
</div>

在这种情况下如何解决重复插槽的存在？ [视觉]

How to resolve duplicate slot presence in this case? [Vue]

vue.js

vue-component

vuejs2