How to use $refs, $parent, and $root in Vue3

1. Parent component accesses child components: vue3 uses $refs, and vue2 uses $children, but it is discarded in vue3.

<template>
  <div>
    <div >
  <!-- 在子组件上定义ref -->
  <son :ac="name" :nn="456" ref="son"></son>
  <!-- 在标签上定义ref -->
  <p ref="p">p标签</p>
  </div>
  </div>
</template>

//在生命周期中打印一下访问的值
 mounted(){
    console.log(this.$refs.son.a,this.$refs.p);
  }

2. Child components access parent components: $parent should be used as little as possible in development, because components have high reusability and poor coupling.

mounted(){
  console.log(this.$parent);
  
}

3. Subcomponents access the root component

mounted(){
  console.log(this.$root);
}