물어봐
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를 통해 사용할 수 있게 됩니다.
열심히 읽고 답변했어요!
