vueファイル内のdataを外部から参照したい

Question

前提・実現したいこと

foo.vueの中のdataを
bar.vueから参照したい

該当のソースコード

//foo.vue
<template>
    <div>
        <form @submit.prevent="testFoo">
            <input type="submit" value="fooButton">
        </form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "fooですよ"
    };
  },
  methods: {
    testFoo: function() {
      console.log("--testFoo");
      console.log(this.msg)
    }
  }
};
</script>

//bar.vue
<template>
    <div>
        <form @submit.prevent="testBar">
            <input type="submit" value="barButton">
        </form>
    </div>
</template>

<script>
import fooB from "@/components/foo.vue";
export default {
  methods: {
    testBar: function() {
      console.log("--testBar");
       fooB.methods.testFoo();
    }
  }
};
</script>

試したこと

上記componentsをそれぞれ表示し、
実行した際、

foo.vue   --testFoo
foo.vue   fooですよ
bar.vue   --testBar
foo.vue   --testFoo
foo.vue   undefined

となり、testBarメソッドより、
testFooのthis.msgにアクセスできていないようです。
アクセスが可能になれば、returnでBarからFooの値を取得したいと考えています。

Answer 1

別々のコンポネントの間で値を共有するためには
大きく分けるとEventBusを利用するパターンと、Pluginを利用するパターン、propsなどを使えます。それぞれ状況により役目が違います。

この場合、他のコンポネントのメソッドを使うのだと判断し、EventBusを使います。

わかりやすく出来てるページはここでした。
https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

やるべきことはこうなります。

1. EventBusを宣言
2. ボタンを押すページ(bar)からEventBusのemit()を利用して呼び出したいイベントの名前を設定（キーです）
3. データを持って来たいページから（foo)EventBusのon()を利用し、実行したいイベントを紐づけする

jsfiddle(old) : https://jsfiddle.net/yeondev/bq0fpL8j/

jsfiddle(new) : https://jsfiddle.net/yeondev/bq0fpL8j/9/

■　補足

上記のパターンは、AからBにデータを送ったり、トリガーを引いたりする仕組みです。
Aから変化を与えたBのデータを、Aからまた取得するにはデータをピンポンするようにやり取りする方法があります。

// main.js
// EventBusを宣言しましょう
Vue.prototype.$EventBus = new Vue()

// foo.vue
<template>
  <div>
    <form @submit.prevent="testFoo">
      <input type="submit" value="fooButton"> => {{ msg }}
    </form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'default fooですよ'
    }
  },
  methods: {
    testFoo: function () {
      console.log('順番3.Foo::testFoo() 開始')
      console.log('順番3-1.Foo::testFoo() 変化する前のメッセージ=> ', this.msg)
      this.msg = 'updated fooですよ'
      console.log('順番3-2.Foo::testFoo() 変化する後のメッセージ=> ', this.msg)
      console.log('順番3-3.Foo::testFoo() リターンせずMsgだけ変換したまま終了')
    }
  },
  created () {
    this.$EventBus.$on('callTestFoo', () => {
      console.log('順番2.Foo::EventBus:EventBus始動、Fooから何かの処理を行う（この場合testFoo）')
      this.testFoo() // msgに何か変化を与えたい場合に使う関数
      console.log('順番4.Foo::EventBus:msgをパラメータとしてBarの関数を呼び出す')
      this.$EventBus.$emit('callTestBar', this.msg) // barにmsgを送る
    })
  }
}
</script>

//bar.vue
<template>
  <div>
    <foo></foo>
    <form @submit.prevent="testBar">
      <input type="submit" value="barButton"> => {{ barMsg }}
    </form>
  </div>
</template>

<script>
import bar from '@/components/bar'
import foo from '@/components/foo'

export default {
  data () {
    return {
      barMsg: 'default barですよ'
    }
  },
  components: {
    foo,
    bar
  },
  methods: {
    getValueFromFoo: function (value) {
      console.log('順番6.Bar::getValueFrom:パラメータを受け取る')
      this.barMsg = value
    },
    testBar: function () {
      console.log('順番1.Bar::testBar:パラメータなしでFooの関数を呼び出す')
      this.$EventBus.$emit('callTestFoo')
      // fooB.methods.testFoo()
    }
  },
  created () {
    this.$EventBus.$on('callTestBar', (parameterFromFoo) => {
      console.log('順番5.Bar::EventBus:EventBus始動、getValueFromFoo関数を呼び出す。書かれてないがFooから貰ったパラメータが入ってる(getValueFromFoo(msg)みたいに）')
      this.getValueFromFoo(parameterFromFoo)
    }) // fooからmsgを貰い、getValueFromFooにパラメータとして渡す
  }
}
</script>

Comments

[funmas]

回答大変ありがとうございます。
自分で思っていたよりも複雑な問題で、非常に助かっております。
記載していただいた内容で無事に、例であげたプログラムを動作することができました。

しかし恥ずかしながら、参照さえ出来てしまえば、
returnで値が返せるものと思っていましたが、簡単なものではなかったようです。

//-----------------------------
//foo.vue
testFoo: function() {
console.log("--testFoo");
console.log(this.msg)
return this.msg
}

//-----------------------------
//bar.vue
console.log(this.$EventBus.$emit('callTestFoo'))　// 追加

//-----------------------------
// console
foo.vue --testFoo
foo.vue fooですよ
bar.vue --testBar
foo.vue --testFoo
foo.vue fooですよ
bar.vue Vue {_...

上記でテストしましたが、msgをBar側で表示することができませんでした。
もしよろしければ、値の引っ張り方をご教示願えないでしょうか。

[yeondev]

なんかめちゃくちゃな形になりましたが、更新した返答をご確認ください。

[funmas]

大変助かりました！！
幾度も対応していただきありがとうございます。
今までアローの意味がわからず、可読性という意味でfunctionで記述してしまい、
thisにアクセスできず、泥沼にはまっていましたが、そこはなんとか自力で解決できました
(参考：https://qiita.com/mejileben/items/69e5facdb60781927929）

このピンポン形式で無事に値を取得することができました。
処理の順番まで懇切に説明していただきありがとうございます。
これからも勉強を進めていきたいと思います。