在 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 中添加一個檢查。