VUE3 빠른 시작: Props를 사용하여 하위 구성 요소에 데이터 전달

VUE3는 성능, 경험 및 유연성 측면에서 크게 향상된 최신 Vue.js 버전입니다. 이 기사에서는 VUE3의 Prop을 사용하여 하위 구성 요소에 데이터를 전달하는 방법을 알아봅니다.

Vue.js는 구성 요소를 기반으로 하는 MVVM(Model-View-ViewModel) 프레임워크입니다. 각 구성 요소에는 로컬 상태와 가능한 작업이 있으므로 구성 요소 간의 통신이 중요합니다. Vue.js에서 상위 구성 요소는 Prop을 통해 하위 구성 요소에 데이터를 전달할 수 있으며, 하위 구성 요소는 전달된 Prop을 수신하여 데이터를 받습니다.

Prop를 사용하여 하위 구성 요소에 데이터를 전달하기 전에 먼저 VUE3의 구성 요소 구문을 이해해야 합니다. VUE3에서 구성 요소는 setup() 함수를 통해 동작을 정의할 수 있습니다. setup() 함수는 구성 요소의 상태와 동작이 포함된 객체를 반환합니다.

아래 코드를 살펴보겠습니다. 이는 포함된 하위 구성 요소에 간단한 문자열을 전달하는 간단한 상위 구성 요소입니다.

<template>
  <div>
    <child-component message="Hello World!"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

위 코드에는 ChildComponent.vue에 대한 참조가 있습니다. 이는 하위 구성 요소입니다. 상위 구성 요소의 템플릿 태그에서 message라는 문자열을 하위 구성 요소에 전달하면 곧 하위 구성 요소에서 이 속성을 볼 수 있습니다.

다음으로 ChildComponent.vue의 코드를 살펴보겠습니다.

<template>
  <div>{{ childMessage }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childMessage = props.message

    return {
      childMessage
    }
  }
}
</script>

위 코드에는 props 객체가 있습니다. Props는 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 편리한 방법을 제공합니다. 하위 구성 요소에서는 문자열이어야 하는 message라는 속성을 정의합니다. 또한 상위 구성 요소가 필수 옵션을 통해 이 속성을 전달하도록 강제합니다.

설정 함수에서는 모든 Prop을 포함하는 props라는 매개변수를 전달합니다. props의 메시지 속성을 childMessage 변수에 할당한 다음 하위 구성 요소 상태의 일부인 childMessage가 포함된 객체를 반환합니다.

마지막으로 템플릿에서 이중 중괄호 구문을 통해 childMessage 변수를 바인딩합니다.

이것은 Props를 사용하여 하위 구성 요소에 데이터를 전달하는 전체 프로세스입니다. 물론 실제 애플리케이션에서는 더 복잡한 데이터 전송 및 렌더링 방법이 있을 수 있지만 위의 예는 Props의 기본 사용법과 구문을 설명하기에 충분합니다.

요약

VUE3의 Props 및 setup() 함수를 사용하여 하위 구성 요소에 데이터를 전달하는 것은 매우 간단하고 유연합니다. Props를 통해 간단한 문자열, 숫자, 부울 값 등은 물론 복잡한 객체와 배열도 전달할 수 있습니다. 이를 통해 구성 요소 간의 통신이 쉽고 자연스러워지며 작업 흐름이 간소화됩니다.

이 기사가 여러분에게 도움이 되기를 바라며 VUE3 구성 요소의 구문과 사용에 대한 더 깊은 이해를 제공할 수 있기를 바랍니다.

위 내용은 VUE3 빠른 시작: Props를 사용하여 하위 구성 요소에 데이터 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!