親子間のデータ連携

子供のコンポーネント

<template>
  <p>{{ foo }}</p> <!-- hoge -->
</template>

<script>
export default {
  props: [
    'foo'
  ]
}
</script>

親コンポーネント

<template>
  <child-component v-bind:foo="var" />
</template>

<script>
export default {
  data() {
    return {
      var: "hoge"
    }
  }
}
</script>

props 経由で受け取った foo の中身はリテラルではななく、親で定義されたオブジェクトのため、foo の値として hoge が出力される。

v-bindはリアクティブのために親子間で連携していることを意味します
下記も同様です。

<child-component :foo="var" />

子コンポーネントから親のイベントを呼出

親のコンポーネント

<template>
  <div>
    ボタンA<child-component v-on:call-parent="parentFunc" foo="1" bar="A" />
    ボタンB<child-component v-on:call-parent="parentFunc" foo="2" bar="B" />
  </div>
</template>

<script>
export default {
  methods: {
    parentFunc(foo, bar) {
      console.log(foo)
      console.log(bar)
    }
  }
}
</script>

子供のコンポーネント

<template>
  <button v-on:click="childFunc(foo, bar)" type="button">Button</button>
</template>

<script>
export default {
  props: [
    'foo',
    'bar'
  ],
  methods: {
    childFunc(foo, bar) {
      this.$emit('call-parent', foo, bar)
    },
  },
}
</script>

子コンポーネントから親のメソッドを実行するためには、子から $emit でイベントを発火させるのがポイントです。

template から直接イベントを発生させることができないため、クリックイベントを一旦子コンポーネントのメソッド ( ここでは childFunc ) で受け取り、そのメソッド内でイベントを処理します。

親子間でデータ量が増えた場合はVUEXを使うのが最善。

今、思案しているところでした・・・