Vue3의 SetupContext 함수에 대한 자세한 설명: Vue3 구성 요소 API 사용 마스터하기

Vue3의 공식 출시로 Vue.js 개발자는 새로운 기능과 API 방법을 사용하여 개발을 시작할 수 있습니다. 그중 SetupContext 함수는 Vue3의 중요한 API 메소드로, Vue3 컴포넌트를 더 잘 작성할 수 있도록 많은 편리한 기능을 제공합니다. 이번 글에서는 SetupContext 함수의 사용법을 자세히 소개하겠습니다.

1. SetupContext 기능이 무엇인가요?

SetupContext 함수는 Vue3에서 제공하는 API 메소드로 컴포넌트의 setup() 함수 내부에서 호출됩니다. 이 함수는 다음 속성을 포함하는 개체를 반환합니다.

props: 구성 요소에서 받은 props 매개 변수
attrs: 구성 요소의 정의되지 않은 모든 속성
slots: 구성 요소 슬롯
emit: 구성 요소의 사용자 정의 이벤트.
SetupContext 함수를 도입하고 setup() 함수에서 사용하면 컴포넌트에 전달된 소품, 슬롯, 사용자 정의 이벤트와 같은 정보를 얻을 수 있습니다.

2. Props 속성

Vue3에서는 더 이상 컴포넌트의 세부 구성에 사용해야 하는 props 매개변수를 선언할 필요가 없습니다. 대신 구성 요소의 setup() 함수에서 props 속성을 사용하여 들어오는 props 매개변수를 가져옵니다.

이런 방식으로 Vue2에서와 같이 전달된 props 매개변수를 가져오기 위해 더 이상 this.$props를 사용할 필요가 없습니다. 예:

// Vue2에서 소품 매개변수 가져오기
props: ['message'],
mounted() {
console.log(this.$props.message)
}

// 다음의 props 속성에서 소품 가져오기 Vue3 매개변수
setup(props) {
console.log(props.message)
}
Vue3에서는 props 매개변수 가져오기 자체가 매우 간단해집니다. 컴포넌트의 setup() 함수에서 props 속성을 사용하여 전달받은 props 매개변수에 직접 접근할 수 있습니다.

구성 요소의 props 매개 변수가 객체이고 모든 속성을 setup() 함수에서 사용해야 하는 경우. 구조 분해 구문을 사용하여 할당을 수행할 수 있습니다. 예:
setup({ message,author }) {

console.log(message, author)

}
이 예에서는 객체 구조 분해 구문을 사용하여 props의 메시지 및 작성자 속성을 변수 message 및 작성자에 할당합니다.

Vue3의 props 매개변수는 읽기 전용 속성이 되었으며 양방향 바인딩을 지원하지 않는다는 점에 유의해야 합니다. props 매개변수를 수정해야 하는 경우 Emit() 메서드를 통해 상위 구성 요소에 메시지를 보내야 합니다.

3. Attrs 속성

props 속성 외에도 SetupContext 개체에는 attrs 속성도 포함되어 있습니다. 이 속성에는 구성 요소의 정의되지 않은 모든 속성이 포함됩니다. 예:
// 구성 요소는 다음과 같이 정의됩니다.
props: {
message: String
},
setup(props, {attrs}) {

console.log(attrs.color) // 'red'

}

// 구성 요소를 사용할 때 색상 속성
e63138e88d784f29ec1a79f88c7ebddd
이 예에서는 example-comComponent 구성 요소를 정의하고 정의되지 않은 색상 속성을 전달합니다. SetupContext 함수를 사용할 때 attrs 속성을 통해 정의되지 않은 속성을 얻을 수 있습니다.

Vue3의 attrs 속성도 읽기 전용 속성이며 양방향 바인딩을 지원하지 않는다는 점에 유의해야 합니다.

4. 슬롯 속성

Vue3은 Vue2와 완전히 동일한 슬롯 속성도 제공합니다. 슬롯 속성을 사용하여 구성 요소에 전달된 슬롯에 액세스할 수 있습니다. 예:

// 구성 요소는 다음과 같이 정의됩니다.
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<slot></slot>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

setup(props, { Slots }) {
console .log (slots.default())
}

// 컴포넌트 사용 시 두 줄의 텍스트가 삽입됩니다
1e4169a907688c493ea0d0bc02056033
e388a4556c0f65e1904146cc1a846bee첫 번째 텍스트 줄94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee텍스트의 두 번째 줄94b3e26ee717c64999d7867364b1b4a3
ddc4a472cd7cd635f2da1cde8db54752
이 예에서는 예제 구성 요소 구성 요소를 정의하고 해당 구성 요소의 슬롯에 삽입합니다. 두 줄 텍스트. setup() 함수에서는 이러한 두 줄의 텍스트에 액세스하기 위해 슬롯 속성을 사용합니다.

Vue3의 슬롯은 기본 슬롯과 명명된 슬롯으로 구분됩니다. 따라서 명명된 슬롯을 얻을 때는 Slot[name]()을 통해 획득해야 합니다.

5. 방출 방법

은 Vue2와 완전히 일치합니다. 방출 방법은 구성 요소가 상위 구성 요소에 메시지를 전송하는 기능을 제공합니다. Vue3에서는 출력 메소드를 setup() 함수에서 호출하고 setup() 함수에서 반환된 객체를 통해 액세스할 수도 있습니다. 예:

// 상위 구성 요소는 다음과 같이 정의됩니다.
d4712db6dc63c81859f3224d9f456a61

// 하위 구성 요소 는 다음과 같이 정의됩니다
setup( _, {emit }) {

function handleClick() {
  emit('example-event', 'example data')
}
return {
  handleClick
}

}
이 예제에서는 이벤트 예제-이벤트 및 그에 수반되는 데이터 예제 데이터를 상위 구성 요소에 전달하기 위해 handlerClick 메서드를 정의합니다.

Vue3의 Emit() 메서드는 읽기 전용 메서드가 되었으며 해당 동작을 수정할 수 없다는 점에 유의해야 합니다.

6. 결론

이 기사에서는 Vue3의 SetupContext 함수와 여기에 포함된 속성 및 메서드에 대해 자세히 논의했습니다. 이러한 Vue.js 3 기능과 API 방법을 익히면 Vue3 구성 요소를 보다 유연하게 작성하고 다양한 비즈니스 시나리오에 더 잘 적응할 수 있습니다.

위 내용은 Vue3의 SetupContext 함수에 대한 자세한 설명: Vue3 구성 요소 API 사용 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!