\n```\n\n이렇게 하면 상위 컴포넌트에서 정의한 데이터를 하위 컴포넌트의 props를 통해 사용할 수 있게 됩니다.","upvoteCount":1,"url":"https://yozm.wishket.com/magazine/questions/share/0a7JftDmVf38Z33s","citation":[{"@type":"CreativeWork","author":{"@type":"Person","name":"테오의 프론트엔드","url":"https://yozm.wishket.com/magazine/detail/1663"},"name":"프론트엔드 아키텍처의 가장 최근 트렌드는? ","url":"https://yozm.wishket.com/magazine/detail/1663","thumbnailUrl":"https://yozm.wishket.com//media/news/1663/image008.png"},{"@type":"CreativeWork","author":{"@type":"Person","name":"데브오웬","url":"https://yozm.wishket.com/magazine/detail/2233"},"name":"리액트 상태 관리 라이브러리, 어떤 것을 써야 할까?","url":"https://yozm.wishket.com/magazine/detail/2233","thumbnailUrl":"https://yozm.wishket.com//media/news/2233/image2.jpg"},{"@type":"CreativeWork","author":{"@type":"Person","name":"요즘IT의 번역글","url":"https://yozm.wishket.com/magazine/detail/682"},"name":"앵귤러 vs 리액트, 2021년의 승자는?","url":"https://yozm.wishket.com/magazine/detail/682","thumbnailUrl":"https://yozm.wishket.com//media/news/682/%EA%B7%B8%EB%A6%BC3.jpg"}]}}}
물어봐
BETA
vue js 에서 하위컴포넌트가 상위 컴포넌트에서 상태 전달하는 방법
IT 지식이 풍부한 고양이 ‘요고’가 답변해 드려요.
Vue.js에서 하위 컴포넌트가 상위 컴포넌트로부터 상태를 전달하는 방법은 props를 사용하는 것입니다. 상위 컴포넌트에서 하위 컴포넌트로 전달하고자 하는 데이터를 props로 정의한 후에 하위 컴포넌트의 템플릿에서 해당 props를 사용할 수 있습니다.
예를 들어, 상위 컴포넌트에서 하위 컴포넌트로 'message'라는 이름의 상태를 전달하려고 한다면, 상위 컴포넌트에서 하위 컴포넌트 태그를 작성할 때 'v-bind' 또는 ':'를 사용하여 해당 데이터를 전달할 수 있습니다.
```
<template>
<div>
<child-component :message="data"></child-component>
</div>
</template>
```
그리고 하위 컴포넌트에서는 props를 정의하여 전달된 데이터를 사용할 수 있습니다.
```
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message'],
// ...
}
</script>
```
이렇게 하면 상위 컴포넌트에서 정의한 데이터를 하위 컴포넌트의 props를 통해 사용할 수 있게 됩니다.
열심히 읽고 답변했어요!
