在 vue 模板中渲染一个孩子

Question

如何在当前的 vue 模板中渲染 $children 之一？

例如，我有 3 个 $children，是否可以渲染this.$children[1] ？

this.$children[1]看起来像：

Answer 1

您可以使用render function 来实现这一点。 想象一下，您有一个Parent组件，您希望始终只渲染第一个子组件。 您可以像这样使用此组件：

<Parent>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, maiores.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, maiores.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, maiores.</p>
</Parent>

这就是您的父组件的样子：

<script>
  export default {
    render(createElement) {
      return createElement('div', [this.$slots.default[0]])
    }
  }
</script>

这只是为了演示该方法-如果您没有任何孩子，此特定代码将失败-因此您需要在渲染 function 中添加一个检查。