===================
화면 내 데이터 전달
===================

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

자식 컴포넌트 예제

.. code-block:: html

    <template>

    …

    </template>

    <script>

        export default {

            …

            name: ‘child’,

            props: [‘some’],

        }

    </script>

부모 컴포넌트 예제

.. code-block:: html

    <template>

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

    </template>

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

.. code-block:: html

    <template>

    …

    </template>

    <script>

    export default {

        …

        name: ‘child’,

        props: {

            some: {

                type: String,

                default: ‘hello wolrd’,

            }

        },

    }

    </script>

2. 라우트 간 데이터 전달

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

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

.. code-block:: javascript

    const router = new Router ({

        …

        routes: [

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

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

        ]

    });

2) 호출 시

.. code-block:: html

    <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>

3. Vuex를 통한 전역 데이터 가져오기

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

.. code-block:: javascript

    export default {

        state: () => ({

            info: {

                name: ‘world',

            }

        }),

        …

        getters: {

            getModuleInfo(state) {

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

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

                return info;

            }

        },

    };

사용시

.. code-block:: html

    <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>

.. note::

    참조
    
    컴포넌트 props : https://kr.vuejs.org/v2/guide/components-props.html

    라우트 속성 전달 : https://router.vuejs.org/kr/guide/essentials/passing-props.html

    Vuex: https://vuex.vuejs.org/kr/