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

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

• 父组件访问子组件：使用 $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>