无法在另一个组件中渲染 $children

Question

我想要动态内容，所以我尝试了类似下面的内容。当我登录$children[0] 时，我得到了正确的数据，但 HTML 上没有显示任何内容。有没有办法渲染$children？

主要：

<template>
   <foo>
      <h1>Content should be rendered {{number}} time.</h1>
   </foo>
</template>
<script>
components: { Foo },
data() {
  return {
    number: 1
  }
}
...
</script>

富：

<template>
   <div v-html="$children[0]"></div>
</template>

Answer 1

您需要使用Slot。只需将<div v-html="$children[0]"></div> 替换为<slot></slot>。