Vue3에서 소품을 사용하고 내보내는 방법

기능: 상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달합니다.

사용법: 한 유형의 구성 요소를 여러 번 사용해야 하는 경우 각 호출은 개인 프로필 테이블과 마찬가지로 특정 위치에서만 다릅니다. 개인이 입력하는 정보는 매번 다르지만 구조는 동일합니다.

사용법 1(타입 지정 없이 단순 수락):

상위 컴포넌트에 하위 컴포넌트를 도입하고, 하위 컴포넌트의 label 속성을 통해 매개변수를 전달하고, 수신을 위해 하위 컴포넌트에 props 옵션을 정의합니다. props

위에서 볼 수 있듯이 age. 전달된 값이 자동으로 1씩 증가하도록 하려면 다음 그림과 같이 +1이 문자열 추가 241이 됩니다. 올바른 해결책은 v-를 사용하는 것입니다. 상위 구성 요소가 매개 변수를 전달할 때 동적 바인딩을 위해 바인드합니다. 또는 콜론(약식)을 사용할 수 있습니다. 이 기능은 아래 그림과 같이 따옴표 안의 표현식을 실행하고 실행 결과를 반환하는 것입니다

사용법 2(동시 유형 제한 허용):

전달된 매개변수 유형이 지정된 유형과 일치하지 않는 경우 전달된 유형이 우선 적용되며 경고가 발생합니다.

사용법 3(동시 유형 제한 허용 + 기본값 지정 허용):

유형을 지정한 후 두 가지 옵션이 있는데, 하나는 필요한지 여부를 지정하는 것이고, 다른 하나는 전달하지 않고 기본값을 지정하는 것입니다. the time

참고:

전달된 props 요소는 변경할 수 없습니다. 그렇지 않으면 오류가 보고됩니다. 이를 수정해야 하는 경우 새 변수를 사용하여 이를 수락한 다음 수정해야 합니다. , 아래 그림과 같이 return보다 props의 우선순위가 높기 때문에 yes.age의 내용을 미리 준비하겠습니다

또한 테스트 후 이 방법은 데이터에서만 사용할 수 있으며 사용할 수 없습니다. setup에서 사용됨

emit Usage

아래 그림과 같이 setup과 context

에 두 개의 매개변수 props가 있습니다. 여기서 props는 위에서 언급한 것처럼 상위 구성 요소에서 하위 구성 요소로 전달되는 정보입니다. 아래 오른쪽 그림에서

이제 초점은 방출에 맞춰져 있고 방출은 컨텍스트입니다.

는 상위 구성 요소에 바인딩된 함수를 트리거하는 데 사용되며 매개 변수를 상위 구성 요소에 다시 전달할 수 있습니다. 구성 요소

는 상위 구성 요소 APP.vue의 구성에 표시된 대로 하위 구성 요소 에 함수 xxx가 바인딩되어 있으며 매개 변수 xxx1이 하위 구성 요소에 전달됩니다. 그리고 바인딩된 함수 xxx1에도 입력할 매개변수가 있습니다.

이번에는 하위 구성요소에 왔습니다. 하위 구성요소의 이벤트에 버튼이 바인딩되어 상위 구성요소의 이벤트 xxx1이 발생하고 문자열 "++"가 전달됩니다.

마지막으로 하위 구성 요소인 StDent에서 버튼을 클릭할 때마다 상위 구성 요소의 문자열 속성이 자동으로 두 개의 +를 추가하여 표시합니다.

emit 요약: 위의 예 이후에는 Emit이 하위 구성 요소가 상위 구성 요소를 트리거할 수 있도록 하는 함수라는 것만 알면 됩니다.

위 내용은 Vue3에서 소품을 사용하고 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!