vue3获取组件的使用

   <!-- 绑定到一个元素上 -->
    <h2 ref="title">哈哈哈</h2>
    <!-- 绑定到一个组件实例上 -->
    <nav-bar ref="navBar"></nav-bar>
    <button @click="btnClick">获取元素</button>
    btnClick() {
        console.log(this.$refs.title);

        console.log(this.$refs.navBar.message);
        this.$refs.navBar.sayHello();

        // $el
        console.log(this.$refs.navBar.$el);
}

<template>
  <div>
    <h2>NavBar</h2>
    <button @click="getParentAndRoot">获取父组件和根组件</button>
  </div>
</template>
methods: {
      getParentAndRoot() {
        console.log(this.$parent);
        console.log(this.$root);
      }
}