vue中$children的理解

简介: 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,...

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
1天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
16 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
10 3
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
13 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
10 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
11 2
|
3天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0