vue中$children的理解

官网介绍 $children

$children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序，也不是响应式的。[特别重要]
如果你发现自己正在尝试使用 $children 来进行数据绑定，
考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

注意1:注意当期实例是指这个文件下的实例。直接子组件是指这个文件下的直接子组件。
      如果子组件中还有子组件则孙子组件不能算直接子组件。

注意2:缺点：需要通过索引才能拿到自己想要的子组件，如果删除了某个子组件，会影响到子组件的结果，所以在实际的开发中比较少用
因此使用这个属性的时候一定要慎之又慎。

$children的简单使用

//childSon 子组件
<template>
  <div class="son-child-div">
    <h1>我是子组件：{{ msg}}</h1>
  </div>
</template>p

<script>
export default {
  data(){
    return {
      msg:'子组件的数据'
    }
  }
}
</script>

//父组件
<template>
  <div>
    <el-button @click="handlerMe">点我</el-button>
    <childSon></childSon>
  </div>
</template>

<script>
import childSon from "@/components/child/childSon.vue"
export default {
  components:{
    childSon
  },
  data() {
    return {
        info:'info'
    }
  },

  methods:{
    handlerMe(){
      console.log('==>',this.$children) //输出数组长度是2
    }
  }
};
</script>

为什么输出的数组长度是2？不应该是1嘛？

console.log('==>',this.$children) //输出数组长度是2
之所以是输出的长度是2。是因为children 获取当前实例的直接子组件。
此时可能会有小伙伴说：我不是子引入了一个 childSon 组件吗？是2 ? ???? 你怕不是在骗我不识数哦。
你好好在看看。
你的意思是说：    <el-button @click="handlerMe">点我</el-button> 也算一个组件吗？ 是的。也是1个。
此时恍然大悟。 如果你把它改成普通的按钮 button, 不去使用 el-button 组件就是1个了。

$children修改子组件中的数据

//父组件
<template>
  <div>
    <button @click="handlerMe">点我</button>
    <childSon></childSon>
  </div>
</template>

<script>
import childSon from "@/components/child/childSon.vue"
export default {
  components:{
    childSon
  },
  data() {
    return {
      info:'info'
    }
  },

  methods:{
    handlerMe(){
      console.log('==>',this.$children) //输出数组长度为1了
      this.$children[0].msg = '我改了数据';
    }
  }
};
</script>

啰嗦一下:$children修改子组件中的数据

$children 修改数据的话，一定要慎之又慎。或者建议不要使用它来修改数据。【反正我不建议】
因为：需要通过索引才能拿到自己想要的子组件。
如果删除了某个子组件，会影响到子组件的结果，这样会导致修改失败。
所以在实际的开发中比较少用。或者不用它
因此使用这个属性的时候一定要慎之又慎。
其实我个人觉得这个属性挺鸡肋的。通信我们可以使用 props, project,...