访问元素%26组件

在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作DOM元素，不过也确实在一些情况下做这些事情是合适的。

一、访问根实例

在每个 new Vue 实例的子组件中，其根实例可以通过 $root.property 来访问。例如：

这种方法对于组件量较少，非常小型的应用来说是很方便的，不过这个模式拓展到中大型应用就显得比较混乱了，在绝大多数情况下，我们推荐Vuex来管理应用的状态。

二、访问父级组件实例

和 $root 类似，我们可以使用 $parent.property 来从一个子组件访问其父组件的实例，它提供了一种机会，可以在后期随时触达父级组件。

因为 $parent 只能触达上一级的父组件，所以在多层嵌套的组件中，最内层的子组件想要触达最外层的父组件的实例，就需要我们的 $parent 也嵌套多层，这样在多层嵌套后也会让我们的应用变得混乱且难以管理。例如：

内部的google-map-markers想要访问父实例，只需要this.$parent.property就可以了。

嵌套一层后，我们想要访问google-map就需要this.$parent.$parent.property。

三、访问子组件实例

尽管存在prop和事件，但有的时候我们仍可能需要在JavaScript里直接访问一个子组件。为了达到这个目的，我们可以通过 ref 这个attribute为自组建赋予一个ID引用。例如：

现在我们已经用 ref 定义了这个组件，那么就可以使用：

来访问这个实例

四、依赖注入

我们可以使用provide选项允许我们指定我们想要提供给后代组建的数据/方法。

我们可以在这个父组件内部提供getMap方法。

然后在任何后代组件中，我们都可以使用 inject 选项来接收指定的沃尔玛你想要添加在这个实例上的property。