Vue.jsのデータ渡しについて (子->親->子)

Question

現在Laravelを使用してWebアプリケーションを開発しています。
Vueを使用するのが初めてで標題の事が出来ず困っています。

---

親: index

子: 年選択
子: テーブル

---

といった構成にしており、
年選択コンポーネントにてaxiosを用いてapiを叩き、テーブルに表示するデータを取得しています。
取得したデータをテーブルに渡してv-forにてtrを生成したいと考えています。
vuexを使用した方法は理解したのですが、そこまで大きいアプリケーションでは無いため、vue単体で管理したいと考えています。

恐らく、
年選択 -> index -> テーブル
といった一方向で渡す形になるのかなと考えてv-bindやpropsで実装しましたが、渡せないといった状況になります。

Answer 1

こんな感じでどうでしょうか？

年選択

<template>
  <select :value="year" @change="onchange">
    <option v-for="year in years" :key="year" :value="year">{{year}}</option>
  </select>
</template>

<script>
export default {
  props: {
    year: {
      type: Number,
      default: new Date().getFullYear()
    }
  },
  methods: {
    onchange (e) {
      this.$emit('year-changed', parseInt(e.target.value, 10))
    }
  }
}
</script>

index

<template>
  <div>
    <year-select :year="year" @year-changed="onYearChanged" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      year: new Date().getFullYear()
    }
  },
  methods: {
    onYearChanged (newYear) {
      this.year = newYear
      // 検索などの処理
    }
  }
}
</script>

Comments

[SystemRyota]

ご回答ありがとうございます。
koel(https://github.com/phanan/koel)を参考に開発しているのですが、親に子のメソッドを実装するのはコンポーネント型としてはアンチパターンだと思っています。
storeを利用しない場合はemitを使用するしか無いのでしょうか。

[退会済みユーザー]

> storeを利用しない場合はemitを使用するしか無いのでしょうか。
storeを利用しない場合は子→親への通信は emit を利用したイベント通信が一般的だと思います。

年選択コンポーネントに検索処理を書きたければ、検索結果をemitで親に渡す→親がテーブルに渡すということもできます。

私は年選択＋テーブルが検索コンポーネントであり、年選択とテーブルはそれぞれ単一の責務を持つ部品コンポーネントと考えました。
ですので、検索処理および各データは親が持つべきではないかと思います。Vuexでいうstateとmutationを親が兼ねるという形ですね。

[sakapun]

親が作ったメソッドを子で実行しているわけではなく、コレはアンチパターンではありません。
このemitパターンが正しいです。

[SystemRyota]

そうなんですね！
ご教示頂いた方法で実装致します。

ありがとうございました。

Answer 2

ざっくりですが、propsの利用はこういった形で渡せないでしょうか。

index

<template>
  <div>
    <search-form/>
    <search-result :lists="searchList"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchList: [],
    };
  },
  components: {
    SearchForm,
    SearchResult,
  },
  //︙
};
</script>

テーブル

<template>
  <div>
    <table>
        <tr v-for="(list,index) in lists">
        <!-- // ︙ -->
    </table>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
      default: [],
      required: true,
    },
  },
};
</script>

Comments

[SystemRyota]

ご回答ありがとうございます。
子から親にデータを渡す時(年選択->index)はどういった記述になるのでしょうか。

[hiro]

他の回答にもある通り `$emit` で渡すのがセオリーかと。