-
vue9(props,emit)JS/vue.js 2022. 3. 14. 18:14
props
:모든 컴포넌트는 각 컴포넌트 자체의 스코프(변수의 유효 범위)를 가지고 있어서 다른 컴포넌트의 값을 참조할 수 없기 때문에 → 부모와 자식간의 데이터 전달 하는데 props 가 필요!
:부모->자식으로 단방향 데이터 전달! (자식->부모 로 전송하는 경우에는 emit event 사용)
따라서 부모 컴포넌트가 업데이트 될때마다 자식 컴포넌트도 자동으로 업데이트!
연습하기
Parent.vue - 부모 컴포넌트
Child.vue - 자식 컴포넌트
//Parent.vue <template> <div class="app"> <div> count : {{ counter }} </div> <button @click="addCounter">+</button> <button @click="subCounter">-</button> <child v-bind:num="counter"></child> <router-view /> </div> </template> <script> import Child from "./Child.vue" export default { name: 'App', component: { child: Child }, data() { return { counter: 0 }; }, methods: { addCounter() { this.counter++; }, subCounter() { this.counter--; } } } </script>
<child v-bind:num="counter">
→이말은
1. child라는 자식 컴포넌트를 여기다가! 2.num로 넘겨(v-bind)주는건 3.counter 다!
따라서 Child.vue에서는 props:["num"]로 받아서 counter값을 갖는다.
//Child.vue <template> <div> <div>counter : {{ num }}</div> <button>+</button> <button>-</button> </div> </template> <script> export default { props: ["num"] } </script>
'JS > vue.js' 카테고리의 다른 글
에러6(.env에러/ELIFECYCLE/this is probably not a problem with npm) (0) 2022.03.15 vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기) (0) 2022.03.15 vue8(router navigation guard 네비게이션 가드) (0) 2022.03.14 에러4(Component name should always be multi-word) (0) 2022.03.14 vue7(DevExtreme-DataGrid이용하기) (0) 2022.03.11