vue访问元素和组件的方法（附示例）(2)-木庄网络博客

当前第2页返回上一页

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

现在在你已经定义了这个ref的组件里，你可以使用：

1	`this.$refs.usernameInput`

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

1	`$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选项来接收指定的我们想要添加在这个实例上的属性：

1	`inject:['getMap']`

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

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

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

以上就是vue访问元素和组件的方法（附示例）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容