Vue 获取子组件数量：$children 属性的使用

在 Vue 中，可以通过 $children 属性获取子组件列表，然后使用 length 属性获取子元素的数量。

例如，假设有一个父组件和两个子组件：

<template>
  <div>
    <child-component></child-component>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    const childCount = this.$children.length
    console.log('There are ' + childCount + ' child components.')
  }
}
</script>

在该例子中，mounted 钩子函数会在组件挂载后执行。在这个函数中，可以通过 this.$children.length 获取子元素的数量，并将其打印到控制台中。

注意，$children 只会返回直接子组件，而不是所有后代组件。如果需要获取所有后代组件，可以使用递归函数来遍历组件树。