## 一:訪問根實例 `this.$root`
在每個`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()
~~~
## 二:訪問父組件實例 `this.$parent`
```
<google-map>
<google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>
```
在`google-map-markers`組件中就可以使用`this.$parent`訪問`google-map`組件。
但是當子組件很多的情況下 ,代碼就很容易變得很長:
var map = this.$parent.map || this.$parent.$parent.map
## 三:訪問子組件實例 `ref`(類似Angular的模版引用變量)
可以通過`ref`特性為這個子組件賦予一個 ID 引用。例如:
```
<base-input ref="usernameInput"></base-input>
```
現在在你已經定義了這個`ref`的組件里,就可以使用:
~~~
this.$refs.usernameInput //base-input組件的實例
~~~