在開發Vue時，官方建議使用屬性及事件對其他元件做處理，不過凡事總有例外的嘛~
還是會有一些情境中會需要直接使用其他組件的各種功能， 不用擔心，Vue也提供了這些尋訪的方式。

尋訪根實體

我們可以在任何的子組件中使用 $root 獲取根實體，如下例所示:

Vue.component('first-layer', {
  template: `<div>
    第一層
    $root.a: {{$root.a}}
    <button @click="$root.addA()">Add a by $root.addA()</button>
    <button @click="$parent.addA()">Add a by $parent.addA()</button>
    b: {{b}}
    <button @click="minusB()">Minus b</button>
    <second-layer></second-layer>
  </div>`,
  data: function() {
    return {
      b: 0
    };
  },
  methods: {
    minusB: function() {
      this.b -= 1;
    }
  }
});

Vue.component('second-layer', {
  template: `<div>
    第二層
    $root.a: {{$root.a}}
    <button @click="$root.addA()">Add a</button>
    $parent.b: {{$parent.b}}
    <button @click="$parent.minusB()">Minus b</button>
  </div>`
});

var vm = new Vue({
  el: '#app',
  data: {
    a: 1
  },
  mounted: function() {
    console.log(this.$children[0].b);
  },
  methods: {
    addA: function() {
      this.a += 1;
    }
  }
});

有兩個階層的元件: first-layer 及 second-layer，second-layer為子元件，first-layer為父元件，這兩個元件中都用 $root.a 取得存在於根實體中的 a 資料，以及使用 $root.addA() 叫用只存在於根實體中的 addA方法。

尋訪父元件實體

與尋訪根實體的方式相似， Vue 提供了 $parent 這個物件使我們可以取得父組件實體。
我們可以在 first-layer 中使用 $parent 操作根實體的資料 a 。

<button @click="$parent.addA()">Add a by $parent.addA()</button>

當按下 add a by $parent.addA() 按鈕時，可以觀察到根實體的資料 a 的數值變化。

另外，我們在 first-layer 組件中加入資料 b 以及 minusbB() 對b進行減一，即便我們在 second-layer 中使用 $parent 依然可以取得其父組件 first-layer 的實體。

原始碼請參考:
https://codepen.io/adjwcmzg/pen/XWgOqew

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#