Question

我有一个问题，我是来自反应背景的新手，看了很长时间，我找不到任何答案。

基本上，我试图在另一个模板的插槽内渲染各种模板。在这种情况下，许多输入。我正在使用单个文件组件。

示例：

page.vue

<template>
  <div>
    <main :class="{small: mainSmall}">
      <div>
        <slot name="content"></slot>
      </div>
    </main> 
  </div>
</template>

<script>
    export default {
      name: 'Page',
    };
</script>

input.vue

<template>
  <div>
    <label>{{ title }}</label>
    <input>
    <div/>
  </div>
</template>


<script>
    export default {
     name: 'Input 
    }
</script>

external.vue

<template>
  <Page>
    <template v-slot:content>
      <div>
        <Input/>
        <Input/>
      </div>
    </template>
  </Page>
</template>

<script>
    export default {
        name: 'External',
    };
</script>

问题在于我试图在页面的内容槽内渲染2个输入，但是vue仅渲染一个。如果我使用多个普通的html标签，则可以使用。

在此先感谢您的帮助。

Vue插槽，用于渲染其他多个组件

0 个答案: