자식 컴포넌트 예제
<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>
전달 방식은 query 와 param으로 나누어 집니다.
const router = new Router ({
…
routes: [
{ path: ‘/param’, name: ‘param’, component: param, props: true}, // props 설정 필요
{ path: ‘/query’, name: ‘query’, component query }
]
});
<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>
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>
Note
참조
컴포넌트 props : https://kr.vuejs.org/v2/guide/components-props.html
라우트 속성 전달 : https://router.vuejs.org/kr/guide/essentials/passing-props.html