无法在另一个组件中渲染$ 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>

Foo：

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

Answer 1

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