今日最新！vue中$children的理解

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

今日最新！vue中$children的理解

2023-01-06 20:53:15 来源：博客园

【资料图】

官网介绍 $children

$children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序，也不是响应式的。[特别重要]如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。注意1:注意当期实例是指这个文件下的实例。直接子组件是指这个文件下的直接子组件。      如果子组件中还有子组件则孙子组件不能算直接子组件。注意2:缺点：需要通过索引才能拿到自己想要的子组件，如果删除了某个子组件，会影响到子组件的结果，所以在实际的开发中比较少用因此使用这个属性的时候一定要慎之又慎。

$children的简单使用

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

//父组件<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 ? ???? 你怕不是在骗我不识数哦。你好好在看看。你的意思是说：    点我 也算一个组件吗？ 是的。也是1个。此时恍然大悟。 如果你把它改成普通的按钮 button, 不去使用 el-button 组件就是1个了。

$children修改子组件中的数据

//父组件<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,...

关键词：这个文件恍然大悟

今日最新！vue中$children的理解

官网介绍 $children

$children的简单使用

我是子组件：{{ msg}}

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

$children修改子组件中的数据

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