使用$root从子组件中访问其他组件

子组件中获取根组件

通过 $root 属性进行访问对于 demo 或非常小型的有少量组件的应用来说这是很方便的。

在子组件中，可以通过this.$root获取根组件：

// 打印出根组件
console.log(this.$root); 
// 打印出根组件的元素
console.log(this.$root.$el); // <div id="app"></div>

从根组件中获取其他组件

从上图我们可以看到，this.$root.$refs中是空的！所以要在子组件中获取根组件中的其他组件，需要动点脑筋。如例：

 // app.vue根组件 模板
<template>
  <div id="app">
    <top-header ref="topHeader"></top-header>
    <child></child>
  </div>
</template>

// 子组件child中
 console.log( this.$root.$children[0].$refs.topHeader );

上图中打印的是：this.$root.$children[0]，可以看到，app根组件下的所有添加了 ref="xxx"的组件，而$children中是所有组件组成的数组。

所以可以通过this.$root.$children[0].$refs.xxx获取到app组件下添加了ref属性的组件！

上图为：this.$root.$children[0].$refs.topHeader获取到的组件信息

$parent访问父组件

$parent 属性可以用来从一个子组件访问父组件的实例。

this.$parent.父组件的方法或者属性

$children访问子组件集合

他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作

console.log( this.$children )

$refs 访问子组件子元素

首先你的给子组件做标记。然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。应该避免在模板或计算属性中访问 $refsref为子组件赋予的多个ID引用如果相同 后面覆盖前面。

<my-con ref="myCon"></my-con>
// 执行子组件中的方法
this.$refs.myCon.sonMsg();