想用Vue写一个页面组件，可以插入多个子模块，数量不定。 请问怎么写？

  • Z时代
  • 2024-02-17
  • 分类：IT

请问怎么插入不指定数量的模块？

<Page>
  <template #module1>
  </template>
  <template #module2>
  </template>
  ...
</Page>

想到解决方案了，采用动态插槽
<slot :name="index"></slot>
因为子模块数量不定，所以名字不能固定。

<div class="module" v-for="(module, index) in titles" :key="index">
          <div
            :ref="(el: refItem) => setRefMap(el, index)"
            class="title pt2 pb2"
            @click="onTabChange(index)"
          >
            <div class="wrapper">
              <div class="pre"></div>
              <span class="ml-2">
                {{ module }}
              </span>
            </div>
          </div>
          <slot :name="index"></slot>
        </div>

回答：

https://play.vuejs.org/#eNqVU8tu2zAQ/JUFe7AUCNQht0A10BY5tIcma...

回答：

1、jsx，插槽只留一个，根据参数动态加载多个模块插入
2、slot 用v-for

    <slot v-for="item in schema" :name="item.prop" />

回答：

既然你想通过插槽进行替换，那就需要确定插槽的位置
一个萝卜一个坑，固定好页面的整体结构，作为整体向外暴露。

回答：

用插槽呗，一个插槽可以插入一个组件，而这个组件又可以包括多个子组件，所以基本上用插槽就可以实现你说的不指定数量的模块。

题主应该把不指定数量的模块理解成不指定数量的插槽了？如果是的话，那应该使用v-for实现吧

以上是 想用Vue写一个页面组件，可以插入多个子模块，数量不定。 请问怎么写？ 的全部内容， 来源链接： utcz.com/p/935147.html

回到顶部