1対複数のコンポーネント間でデータのやりとりは可能でしょうか？？

１つのコンポーネントに対して複数のコンポーネントからデータを取得することは可能でしょうか？？
実現したい内容としては、
component1
component2
component3
でそれぞれデータを取得し、そのデータ（list1,list2,list3）を元にCSVを作成するcomponent4を作りたいです。
そのために、component4内でcomponent1,2,3のデータにアクセスしたいと考えております。
調べると1対1のコンポーネント間のデータの受け渡しの記事が多く、1対複数で実現可能かご教授頂きたいです。
もし可能であればその用法の名称など教えて頂ければ幸いです。よろしくお願いします。

１コンポーネントでまとめました。ご回答者様へのご報告用

<template>
    <div class="col-sm-2 col-form-label">
        <h3>請選擇客戶名字</h3>
        <v-select id="sel1" v-model="tableSelected1" :on-change="fetchTags1()" :options="tables">
            <option v-for="table in tables1" :key='table.id'>{{ table }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected1" :options="tags1">
            <option v-for="tag in tags1" :key='tag.id'>{{ tag }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h3>請選擇客戶名字</h3>
        <v-select id="sel2" v-model="tableSelected2" :on-change="fetchTags2()" :options="tables">
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected2" :options="tags2">
            <option v-for="tag in tags2" :key='tag.id'>{{ tag }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h3>請選擇客戶名字</h3>
        <v-select id="sel3" v-model="tableSelected3" :on-change="fetchTags3()" :options="tables">
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>

        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected3" :options="tags3">
            <option v-for="tag in tags3" :key='tag.id'>{{ tag }}</option>
        </v-select>
        
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <button id="btn" @click="creatCsv">確定</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      tables: '',
      tableSelected1: '',
      tags1: '',
      tagSelected1: '',
      tableSelected2: '',
      tags2: '',
      tagSelected2: '',
      tableSelected3: '',
      tags3: '',
      tagSelected3: ''
    }
  },
  created () {
    axios.get('API1').then(response => {
      this.tables = response.data
    })
      .catch(e => {
        this.errors.push(e)
      })
  },        
  methods: {
    fetchTags1: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected1
        },
      }).then(response => {
        this.tags1 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    fetchTags2: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected2
        },
      }).then(response => {
        this.tags2 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    fetchTags3: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected3
        },
      }).then(response => {
        this.tags3 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    creatCsv: function () {
      alert(this.tagSelected1);
    }
  }
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

イメージされている内容と異なるかもしれませんが、、、
propsと$emitを利用することで値の受け渡し(表現は間違っているかもですが,,,)は可能です。

以下例です。

親

vue
1<template>
2  <v-container>
3    <component-1 :selected.sync="selected1"></component-1> // v-bindで値の受け渡し.syncをつけることで親と子で値の受け渡しが可能になります。
4    <component-2 :selected.sync="selected2"></component-2>
5    <component-3 :selected.sync="selected3"></component-3>
6    親値：{{ selected }}
7    <component-4 :selected="selected"></component-4>
8  </v-container>
9</template>
10
11<script>
12import Component1 from '@/components/Component1';
13import Component2 from '@/components/Component2';
14import Component3 from '@/components/Component3';
15import Component4 from '@/components/Component4';
16
17export default {
18  components: {
19    Component1,
20    Component2,
21    Component3,
22    Component4
23  },
24  data() {
25    return {
26      selected1: [],
27      selected2: [],
28      selected3: []
29    };
30  },
31  computed: {
32    selected: function() {
33      return [...this.selected1, ...this.selected2, ...this.selected3];
34    }
35  }
36};
37</script>
38

コンポーネント1~3

同じ作りです。(セレクトリストの値などのみ変更しています。)

vue
1<template>
2  <div>
3    <v-select v-model="syncedSelected" label="コンポーネント1" :items="items" multiple></v-select>
4    コンポーネント1値：{{ syncedSelected }}
5  </div>
6</template>
7<script>
8export default {
9  props: ['selected'], // propsで親で設定したselectedを取得
10  data: function() {
11    return {
12      items: [
13        {
14          text: 'item1',
15          value: 1
16        },
17        {
18          text: 'item2',
19          value: 2
20        },
21        {
22          text: 'item3',
23          value: 3
24        }
25      ]
26    };
27  },
28  computed: {
29    syncedSelected: { // コンポーネント内で値を利用する場合は、算出プロパティで利用
30      get() {
31        return this.selected;
32      },
33      set(value) {
34        this.$emit('update:selected', value); // $emit(update:propsの値名)で更新
35      }
36    }
37  }
38};
39</script>
40

コンポーネント4

vue
1<template>
2  <div>
3    コンポーネント4値：{{ selected }}
4    <br />
5    <v-btn @click="onClick">処理</v-btn>
6    <h3>{{ complete }}</h3>
7  </div>
8</template>
9<script>
10export default {
11  props: ['selected'], // propsで値を受け取る
12  data: function() {
13    return {
14      complete: ''
15    };
16  },
17  methods: {
18    onClick: function() {
19      this.complete = `何かしらの処理${this.selected}`;
20    }
21  }
22};
23</script>
24