Question

我在插槽中插入了很多HTML。而且我需要从组件数据中更改此HTML。但是我无法获取组件的数据

<template lang="pug">
.div
  slot
</template>
<script>
export default {
 name: "mycomponent",
 data() {
  return {
    sizeblock: 0,
    activetab: 3
  }
 }
}
</script>

在html中：

mycomponent.div
  nav(:style="{'min-height': sizeblock+'px'}")
    button(:class="{'active': activetab == index") 1
    button(:class="{'active': activetab == index") 2
    button(:class="{'active': activetab == index") 3

Answer 1

您可以将data传递给slot，并在将其替换为父项时使用它

我对pug模板不熟悉，因此在编写普通模板时希望您能够进行转换。

因此，您将把数据传递到插槽，当您使用它时，您将收到它

<template lang="pug">
.div
  <slot :data="{ sizeblock, activetab}" />
</template>

<script>
export default {
 name: "mycomponent",
 data() {
  return {
    sizeblock: 0,
    activetab: 3
  }
 }
}
</script>

mycomponent.div
 <template v-slot:default="{data}">
     nav(:style="{'min-height': data.sizeblock+'px'}")
    button(:class="{'active': data.activetab == index") 1
    button(:class="{'active': data.activetab == index") 2
    button(:class="{'active': data.activetab == index") 3
  </template>

如何显示插槽中组件的数据？

1 个答案: