Question

所以我有以下例子：

这是我的孩子组件。以下所有其他组件都基于此。

<template>
  <div class="content-box">
    <div class="boxtitlecontainer titleColor">
      <slot name="title">Title</slot>
    </div>
    <div class="insidebox boxColor">
      <slot></slot>
    </div>
  </div>
</template>

这是其中一个孩子。

<template>
  <div class="example">
    <box>
      <div slot="title"><slot name="title">Title</slot></div>
      <slot></slot>
    </box>
  </div>
</template>

此组件直接用于我的App.vue。要使用<slot> s，我发现的唯一方法就是上面这个。

我的问题是：是否有一种更优雅的方式来做这个并且不需要堆叠div-Boxes？我的意思是，我可以在没有命名的插槽的情况下做到这一点。我想<slot>可以像content -> slot(1st children) -> slot(2nd children)那样递归地显示，但我不知道如何使用命名槽来实现它。

提前感谢您的帮助。

Answer 1

而不是依赖于传递内容的插槽，为什么不使用道具呢？

<template>
  <div class="example">
    <box>
      <div v-text="title">Title</div>
      <slot></slot>
    </box>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

Vue.js使用儿童孩子的插槽

1 个答案: