Vue.js で 子から親のdataにアクセスする

Ⅰ. はじめに

タイトルの通り「Vue.js で 子から親のdataにアクセスする」方法です。
この記事の方法でもアクセスできますが、推奨しません。

他componentのデータやメソッド等にアクセスする必要を感じたときはStoreパターンやVuexを学んだ方が良いです。
また、Vuexは大規模アプリのみ良さがあります。小規模でVuexを利用した場合非常に冗長で面倒だと感じます。

Ⅱ. やり方

親 main.js

new Vue({
  data () {
    return {
      hoge: 'abc'
    }
  }
})

子 xxx.vue

階層が深くなればなるほど $parent を増やせばアクセスできます。

export default {
  methods: {
    getParentValue () {
      console.log(this.$parent.$parent.$data.hoge)
    }
  }
}

Ⅲ. ルート要素へアクセスするやり方

// これにアクセスしたい時
new Vue({ ... })

this.$root