Day21——父组件访问子组件——$children&$refs

最新推荐文章于 2023-01-31 21:37:59 发布

Android_la

最新推荐文章于 2023-01-31 21:37:59 发布

阅读量206

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107612466

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. 父组件访问子组件
- 2.1 问题背景
- 2.2 实现

一. 回顾

前面学习了Day20——父子组件通信案例，今天学习通过使用$children或者$refs实现父组件访问子组件

二. 父组件访问子组件

2.1 问题背景

前面学习过父子组件之间的通信，但是都是通过传值的方式来实现的。这种方式极其繁琐沉重，有时候希望直接拿到父组件对象或者子组件对象，通过对象访问父子组件的数据或方法

2.2 实现

$children拿到的是一个数组，数组的元素是子组件对象。通过children访问需要使用下标，有时候在数组中间插入值，会影响数组后面的元素，因此通过refs方式访问就诞生了。refs拿到的是一个空的对象，它以键值对的形式存储组件。语法是在组件上使用ref属性以及赋值。

注意下面代码中的注释，很重要，如下：

<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
    },
    methods: {
      btnClick(){
        //1. $children的用法
        // console.log(this.$children);//打印一下有哪些子组件对象，this.$children是一个数组，因为可能有很多子组件
        // // this.$children[0].showMessage();//调用子组件对象的showMessage()方法
        // //循环遍历子组件对象数组
        // for(let c of this.$children){
        //   console.log(c.name);
        //   c.showMessage();
        // }
        //使用$children要用到下标，但是很多情况下，数组不是一成不变的，
        // 有时候会在数组中间插入元素，那么后面的元素就会被影响。因此就有了使用$refs,
        //其原理类似于Map，每一个value对应一个key
        //2.通过$refs拿到子组件对象
        // $refs默认是一个空对象，要在组件中添加ref属性指定key，组件才能被添加到$refs中
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return {
            name: '我是子组件的name',
          }
        },
        methods: {
          showMessage(){
            console.log('showMessage');
          }
        }
      }
    }
  })
</script>
</body>