使用Vue

Question

我有一个递归组件，它将通过JSON模式创建表单。 我想使用插槽，因此我可以从外部进行一些更改，在生成表单时，我会从vue收到此错误：

vue.runtime.esm.js:588 [Vue warn]: Duplicate presence of slot
"ref-field" found in the same render tree - this will likely cause render errors.

这是表单生成器的一些主要入口点：

<component-stepper
  :initData="stepperData"
>
  <template slot="non-required-step-field-ref">
    <div>HA!</div>
  </template>
</component-stepper>

这是表单生成器上要引用该插槽的一点：

<component
  v-for="(structure, _name) in properties"
  :key="_name"
  :is="getComponentRender(structure.type)"
  :field-name="_name"
  v-bind="structure"
  :value="formData[_name]"
  style="margin-bottom: 1.5em;"
  @input="updateForm(_name, $event)"
>
  <template slot="text-field">
    <slot name="text-field"></slot>
  </template>
  <template slot="ref-field-inner">
    <slot name="ref-field"></slot>
  </template>
  <template slot="obj-field">
    <slot name="obj-field"></slot>
  </template>
</component>

，这是插槽应终止的端点之一：

  <v-layout row>
    <v-flex
    :xs10="$slots['ref-field-inner']">
      <v-autocomplete
        :items="items"
        :value="value"
        :label="fieldName"
        :loading="loading"
        :search-input.sync="search"
        cache-items
        hide-details
        hide-no-data
        @input="$emit('input', $event)"
      />
    </v-flex>
    <v-flex
      xs2
      style="vertical-align: bottom;"
      v-if="$slots['ref-field-inner']">
      <slot name="ref-field-inner"></slot>
    </v-flex>
  </v-layout>

该过程完全可以执行我想要的操作，但是正确的方法是什么，这样我就不会收到错误消息？