官网介绍 $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,...