vue 中组件与组件之间通信的方式

//代码视例
<script>
      Vue.component("parent", {
        data() {
          return {
            name: "张小三"
          };
        },
        template: `
          <div class="parent">
            <h1 ref="box2">我是 parent ， 我的名字是 {{ name }}</h1>
          </div>
        `,
        created() {
          console.log(this.$children);
        }
      });


      let vm = new Vue({
        el: "#app",

        data: {
          name: "张三丰"
        },

        template: `
          <div id="app" class="root">
            <button @click="fn1">获取h1的真实dom对象</button>
            <h1 ref="box">我是老祖宗，根组件，我的名字是 {{ name }}</h1>
            <parent ref="box2" ></parent>
          </div>
        `,

        methods: {
          fn1() {
            // 该如何获取 当前这个组件的 h1 的dom对象
            1.
            console.log(document.getElementById("box")); // 不推荐使用，有副作用
            2.
            console.log(this.$el.querySelector("#box")); // 可以使用，不会有副作用
            // 3. 最推荐的方式
            console.log(this.$refs["box"]);
            console.log(this.$refs.box2);
            // ? 需要获取到 parent 组件中 h1 标签的那个dom对象
            console.log(this.$refs["box2"].$el.querySelector("h1"));
            console.log(this.$refs["box2"].$refs["box2"]);
          }
        }
      });
    </script>