vue访问元素&组件

访问根实例

在每一个new Vue实例的子组件中，其根实例能够经过$root属性进行访问。
例子：

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

全部的子组件均可以将这个实例做为一个全局store来访问或使用。

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

注意：
对于demo或很是小型的有少许组件的应用来讲这是很方便的。不过这个模式扩展到中大型应用来讲就不合适了。所以在绝大多数状况下，咱们强烈推荐使用Vuex来管理应用的状态。

访问父组件实例

和$root相似，$parent属性能够用来从一个子组件访问父组件的实例。它提供了一种机会，能够在后期随时触达父级组件，以替代将数据以prop的方式传入子组件的方式。
注意：

在绝大多数状况下，触达父级组件会使得你的应用更难调试和理解，尤为是当你变动了父级组件的数据的时候。当咱们稍后回看那个组件的时候，很难找出那个变动是从哪里发起的。

## 访问子组件实例或子元素 ##
尽管存在prop和事件，有的时候你仍可能须要在Javascript里直接访问一个子组件。为了达到这个目的，你能够经过ref特性为这个子组件赋予一个ID引用。例如：

<base-input ref="usernameInput"></base-input>

如今在你已经定义了这个ref的组件里，你能够使用：

this.$refs.usernameInput

来访问这个 <base-input> 实例，以便不时之需。
当 ref 和 v-for 一块儿使用的时候，你获得的引用将会是一个包含了对应数据源的这些子组件的数组。
注意：

$refs 只会在组件渲染完成以后生效，而且它们不是响应式的。这仅做为一个用于直接操做子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

依赖注入

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

在这个组件里，全部<google-map>的后代都须要访问一个getMap方法，以便知道要跟哪一个地图进行交互。不幸的是，使用$parent属性没法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例属性：provide和inject。
provide选项容许咱们指定咱们想要提供给后代组件的数据/方法。在这个例子中，就是<google-map>内部的getMap方法：

provide(){
    return{
        getMap:this.getMap
    }
}

而后在任何后代组件里，咱们均可以经过使用inject选项来接收指定的咱们想要添加在这个实例上的属性：

inject:['getMap']

相比$parent来讲，这个用法可让咱们在任意后代组件中访问getMap，而不须要暴露整个<google-map>实例。这容许咱们更好的持续研发该组件，而不须要担忧咱们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明肯定义的，就和props同样。
祖先组件不须要知道哪些后代组件使用它提供的属性
后代组件不须要知道被注入的属性来自哪里
注意：

然而，依赖注入仍是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，由于使用它们来建立一个中心化规模化的数据跟使用 $root作这件事都是不够好的。若是你想要共享的这个属性是你的应用特有的，而不是通用化的，或者若是你想在祖先组件中更新所提供的数据，那么这意味着你可能须要换用一个像 Vuex 这样真正的状态管理方案了。