Vue.js는 멈춘 포인트 메모 (API로 데이터 가져 오기)

Vue.js 시작 1개월
다양한 기사와 블로그의 출처를 참고하여,
기본을 소홀히 하면 츠케가 돌아왔으므로, 자계를 담아 메모합니다.

부모 - 자식 구성 요소에서 데이터 전달 → 페이지에서 표시

만들고 싶은 모양

　　　(親コンポーネント)　　　　　　　　　　　（子コンポーネント）
API叩いてデータ取得(json)　→　親からデータを受け取り、templateで整形
　　　　　 ↑　　　　　　　　　　　　　　　　　　|
(pages A) request 'A'　    　 返却　　　← 
(pages B) request 'B'　　　　　返却　　　←
(pages C) request 'C'　　　　　返却　　　←

페이지 (A ~ C)에 액세스하면 부모 구성 요소에 요청을 알립니다

부모 구성 요소는 Axios에서 서버 측 API를 두드려 데이터를 가져옵니다.

취득한 데이터를 아이 컴퍼넌트에 건네주어, template를 적용해 view에 돌려주고

아래에서 소개되는 팩토리 패턴 API를 참고하여 소규모 앱을 만들고 있습니다.
【Vue.js】Web API 통신의 디자인 패턴 (개인적 모범 사례)

빠진 포인트 「부모 comp → 아이 comp → pages의 흐름으로 props라고 생각했다」

index.vue

<template>
  <div id="app">
      <p>index.vueの内容です</p>
      <child-component/>
  </div>
</template>

<script>
  import Child from '../components/Child.vue';

  export default {
    components: {
      'child-component': Child,
    }
  }
</script>

페이지 아래의 index.vue에서 Child를 가져 오고 ...

Child.vue

<template>
  <p>子コンポーネントの内容です</p>
  <p>{{ info }}</p>
</template>

<script>
  export default  {
    name: 'child',
    props: ['info']
  }
</script>

Child는 Parent에서 props로 받았습니다.

apiComponent.vue

<!--親コンポーネント-->
<template>
    <child :info="info" />
</template>

<script>
  import SpotList from './SpotList.vue'
  import Child from './Child.vue';

  import {RepositoryFactory} from '../api/RepositoryFactory'
  const SpotsRepository = RepositoryFactory.get('spots');

  export default {
    name: "api-component",
    components: {
      'spotlist': SpotList,
      'child': Child,
    },
    data() {
      return {
        isLoading: false,
        info: [], //取得したデータはinfoに格納する
      };
    },
    created() {
      this.fetch()
    },
    methods: {
      async fetch() {
        this.isLoading = true;
        const {data} = await SpotsRepository.get(); // データ取得
        this.isLoading = false;
        this.info = data;
      }
    }
  }
</script>

부모는 API에서 얻은 데이터를 배열에 넣고 v-bind
아무것도 표시되지 않습니다 (슬픈)

결론적으로는 pages측의 Import를 부모 컴포넌트로 바꾸면 표시되었습니다.

index.vue

<template>
  <div id="app">
    <api-component />
  </div>
</template>

<script>
  import ApiComponent from '../components/apiComponent.vue';

  export default {
    components: {
      'api-component': ApiComponent,
    }
  }
</script>

낙타 케이스, 케밥 케이스 등 기재 방법이 다릅니다?
데이터 반영을 mounted로 하는? 등 여러가지 시도했는데 잘 가지 않고 시간을 보냈습니다.
v-bind 등이 얽힌 장소는, 컴퍼넌트간의 관계에 주의하지 않으면 안 됩니다. . .