在 vue 模板中渲染一个孩子答案

【问题标题】：Render one of child in vue template在 vue 模板中渲染一个孩子
【发布时间】：2020-05-15 09:20:48
【问题描述】：

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

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

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

【问题讨论】：

我的帖子能回答你的问题吗？
看起来是可行的方法，所以可能是的。但我现在不能检查这个

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您可以使用render 函数来实现。想象一下，您有一个 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>

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

【讨论】：