请说明Vue中$root、$refs、$parent的使用 ？

在 Vue 中，$root、$refs 和 $parent 是一些特殊的实例属性，可以帮助我们在组件树中进行导航和操作。

1. $root：这个属性用于获取 Vue 应用的根实例。在任何子组件中，你都可以通过 this.$root 访问到根实例。这在一些特殊情况下可能会有用，比如全局事件监听或全局状态管理。

   mounted() {
     console.log(this.$root) // 输出：Vue 根实例
   }
   

2. $refs：这个属性用于直接访问模板中的元素或子组件。你可以在元素或子组件上添加 ref 属性，然后通过 this.$refs 来访问它们。需要注意的是，$refs 只能在渲染完成后访问，不能在 data 或 props 中使用，因为它们会在 $refs 初始化之前进行渲染。

   <template>
     <div ref="myDiv">Hello Vue!</div>
   </template>
   
   <script>
   export default {
     mounted() {
       console.log(this.$refs.myDiv) // 输出：对应的 DOM 元素
     }
   }
   </script>
   

3. $parent：这个属性用于获取当前组件的父组件实例。你可以通过 this.$parent 来访问父组件。这在一些情况下可能会有用，比如从子组件访问父组件的数据或方法。但是，过度依赖 $parent 可能会导致组件耦合过紧，建议优先使用 props 和 events 进行父子组件间的通信。

   mounted() {
     console.log(this.$parent) // 输出：父组件实例
   }
   

   需要注意的是，尽管 $root、$refs 和 $parent 在某些情况下很有用，但是它们都会破坏组件的封装性和独立性，使得组件变得难以理解和重用。所以，我们应该尽量避免在组件中使用这些特殊的实例属性。