二十一、父子组件的通信（父子组件的访问方式）

有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件

父组件访问子组件：使用 $children 或 $refs (renference--引用)
子组件访问父组件：使用 $parent

一、父访问子

1. this.$children 是一个数组类型，它包含所有子组件对象

我们这里通过一个遍历，取出所有子组件的message状态

<div id="app">
  <my_cpn></my_cpn>
  <my_cpn></my_cpn>
  <my_cpn></my_cpn>
  <button @click="btnClick">按钮</button>
</div>
 
<template id="cpnC">
  <div>我是子组件</div>
</template>
 
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World"
    },
    methods: {
      btnClick(){
        // 1. $children => 数组类型
         console.log(this.$children);
         for(let c of this.$children){
           console.log(c.name);
         }
        // 一般不适用下标值拿数据
        this.$children[0].showMessage();
      }
    },
    components: {
      my_cpn: {
        template: "#cpnC",
        data(){
          return{
            name: "我是子组件的name"
          }
        },
        methods: {
          showMessage(){
            console.log("showMessage")
          }
        }
      }
    }
  });
</script>

2. this.$refs 是一个对象类型，它默认是一个空对象包含所有子组件对象，需要在模板引用标签上加上 ref="key" 使用

<div id="app">
  <my_cpn></my_cpn>
  <my_cpn></my_cpn>
  <my_cpn ref="aaa"></my_cpn>
  <button @click="btnClick">按钮</button>
</div>
 
<template id="cpnC">
  <div>我是子组件</div>
</template>
 
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World"
    },
    methods: {
      btnClick(){
        // 1. $children => 数组类型
        // console.log(this.$children);
        // for(let c of this.$children){
        //   console.log(c.name);
        // }
        // 一般不适用下标值拿数据
        //this.$children[0].showMessage();
 
        //2. $refs =>对象类型，默认是一个空对象
        // 需要在模板引用标签上加上 ref="key" 使用
        console.log(this.$refs.aaa.name)
        
      }
    },
    components: {
      my_cpn: {
        template: "#cpnC",
        data(){
          return{
            name: "我是子组件的name"
          }
        },
        methods: {
          showMessage(){
            console.log("showMessage")
          }
        }
      }
    }
  });
</script>

二、子访问父

1. this.$parent 访问父类组件

2. this.$root 访问根组件

<div id="app">
  <my_cpn></my_cpn>
</div>
 
<template id="cpnC">
  <div>
    <p>我是子组件</p>
    <button @click="btnClick">按钮</button>
    <d_cpn></d_cpn>
  </div>
</template>
 
<template id="cpnD">
  <div>
    <p>我是子组件的子组件</p>
    <button @click="btnClick">按钮</button>
  </div>
</template>
 
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World"
    },
    components: {
      my_cpn: {
        template: "#cpnC",
        data(){
          return{
            name: "我是二级的组件"
          }
        },
        methods: {
          btnClick(){
            // 1.访问父组件$parent
            console.log(this.$parent)
          }
        },
        components: {
          d_cpn: {
            template: "#cpnD",
            methods: {
              btnClick(){
                //访问父组件
                console.log(this.$parent);
                console.log(this.$parent.name);
 
                //访问根组件
                console.log(this.$root);
                console.log(this.$root.message);
              }
            }
          }
        }
      }
    }
  });
</script>