本篇文章给大家带来的内容是关于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
来访问这个
当 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>
在这个组件里，所有
provide选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是
provide(){
return{
getMap:this.getMap
}
}然后在任何后代组件里，我们都可以通过使用inject选项来接收指定的我们想要添加在这个实例上的属性：
inject:['getMap']
相比$parent来说，这个用法可以让我们在任意后代组件中访问getMap，而不需要暴露整个
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
注意：
然而，依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！
以上是vue访问元素和组件的方法（附示例）的详细内容。更多信息请关注PHP中文网其他相关文章！
