Question

想象一下，我的组件中具有以下模板。 <slot/>接受任何类型的组件，例如input type=text，label等。

<template>
  <div :class="field">
    <slot/>
  </div>
</template>

如何从每个插槽组件获取索引或计数器？例如，第一个组件的索引为0，第二个组件的索引为1等等。

索引对于嵌套形式的Rails集成很有用，其中需要对每个字段（在Rails中）进行索引。

Answer 1

您可以使用$slots关键字来获取广告位信息

例如，将其添加到组件的脚本部分

created() {
  console.log(this.$slots);
},

您将获得一个包含组件所有插槽的对象

{
 // if you create named slot this will be the name of your slot instead
 // default is the name of default slot (same as your case)
 default: [
   // All the elements of the default slot will be there
   // Each entry is an element
   0: {
     ...
   },
   ...
 ]
}

我希望这可以帮助您找到所需的广告位信息。

如果您需要有关$slots关键字的更多说明，请检查此页面https://vuejs.org/v2/api/#vm-slots

获取Vue插槽中每个组件的索引

1 个答案: