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

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于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的方式传入子组件的方式。
注意：

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

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

阅读剩余部分