화면 내 데이터 전달

  1. 부모 - 자식 간 데이터 전달

자식 컴포넌트 예제

<template>

…

</template>

<script>

    export default {

        …

        name: ‘child’,

        props: [‘some’],

    }

</script>

부모 컴포넌트 예제

<template>

    <child :some=”some”></child>

</template>

자식 컴포넌트에서 기본값 또는 타입 지정 예시

<template>

…

</template>

<script>

export default {

    …

    name: ‘child’,

    props: {

        some: {

            type: String,

            default: ‘hello wolrd’,

        }

    },

}

</script>
  1. 라우트 간 데이터 전달

전달 방식은 query 와 param으로 나누어 집니다.

  1. src/router/index.js 내에서 전달할 라우트 설정

const router = new Router ({

    …

    routes: [

        { path: ‘/param’, name: ‘param’, component: param, props: true}, // props 설정 필요


        { path: ‘/query’, name: ‘query’, component query }

    ]

});
  1. 호출 시

<template>

    …

</template>

<script>

export default {

    …

    method: {

        moveQuery() {

            this.$router.push({ name: ‘query’, query: { .name: ’cat’, age: 1 } });

        },

        moveParam() {

            this.$router.push({ name: ‘param’, query: {.name: ‘dog’, age: 2 } });

          }
      }

}

</script>
  1. Vuex를 통한 전역 데이터 가져오기

src/store/module/module.js 내에서 설정

export default {

    state: () => ({

        info: {

            name: ‘world',

        }

    }),

    …

    getters: {

        getModuleInfo(state) {

            const info = _.cloneDeep(state.info);

            info.msg = ‘hello ’ + info.name;

            return info;

        }

    },

};

사용시

<template>

    …

    <div>{{$store.module.info.name }}</div>

    <div>{{module.name}}</div>

    <div>{{getModuleInfo.msg}}</div>

</template>

<script>

import { mapState, mapGetters } from ‘vuex’;

export default {

    …

    computed: {

        …mapState({

            module: (state) => state.app.info,

        }),

        …mapGetters({

            getModuleInfo: ‘getMoudleInfo’,

        })

    }

}

</script>