setup(props,context){}
첫 번째 매개변수 props:
props는 상위 구성 요소에서 하위 구성 요소로 전달된 모든 데이터를 포함하는 객체입니다.
수신하려면 하위 구성 요소의 소품을 사용하세요.
구성에서 선언되고 전달된 모든 속성을 포함하는 객체입니다
. 즉, props를 통해 상위 구성 요소가 하위 구성 요소에 전달한 값을 출력하려는 경우입니다.
구성을 수신하려면 props를 사용해야 합니다. 즉, props:{......}
Props를 통해 구성을 허용하지 않으면 출력 값이 정의되지 않습니다
. <template> <div> 상위 구성요소</div> <no-cont :mytitle="msg" othertitle="다른 사람의 직함" @sonclick="손클릭"> </no-cont> </템플릿> <스크립트> "../comComponents/NoCont.vue"에서 NoCont 가져오기 기본값 내보내기 { 설정 () { 메시지를 보내세요={ title:'상위 구성 요소에서 하위 구성 요소로의 데이터' } 함수 sonclick(msss:string){ console.log(msss) } 반환 {msg,sonclick} }, 구성요소:{ 연속 없음 } } </스크립트>
<템플릿>
<div @click="sonHander"> 나는 하위 구성 요소의 데이터입니다</div> </템플릿> <스크립트> 'vue'에서 가져오기 { 정의구성요소, 설정 }; 기본 정의 내보내기({ 이름: 'NoCont', // 허용되지 않음 // 소품:{ // 내 제목:{ // 유형:객체 // } // }, 설정(소품,컨텍스트){ console.log('props==>',props.mytitle);//출력 값이 정의되지 않았습니다. 함수 sonHander(){ context.emit('sonclick','하위 구성 요소가 상위 구성 요소에 전달되었습니다.') } {sonHander} 반환 } }); </script>
props.mytitle을 통한 값 출력이 정의되지 않은 이유는 무엇입니까?
구성 수신을 위해 props를 사용하지 않았기 때문입니다. 그것은
소품입니다:{ 내 제목:{ 유형:객체 } },
Acceptance 구성을 추가하는 경우
두 번째 매개변수인 context는 객체입니다.
내부에는 attrs(현재 태그의 모든 속성을 얻는 객체)가 있는데,
이 속성은 props에서 수신하도록 선언되지 않은 모든 객체입니다.
값을 얻기 위해 props를 사용하고 동시에 props에서 얻고자 하는 값을 선언하는 경우
: 획득된 값은 정의되지 않습니다
.참고:
attrs 값을 얻으려면 이를 받기 위해 props에서 선언이 필요하지 않습니다
..
첫 번째 매개변수 props에서 얻은 값은이벤트 배포(이 이벤트를 상위 구성 요소에 전달할 때 이 이벤트를 사용해야 함)
와 슬롯 슬롯
<template>을
수신하기 위해 props에서 선언되어야 합니다.
<div @click="sonHander"> 나는 하위 구성 요소의 데이터입니다</div> </템플릿> <스크립트> 'vue'에서 가져오기 { 정의구성요소, 설정 }; 기본 정의 내보내기({ 이름: 'NoCont', 소품:{ 내 제목:{ 유형:객체 } }, 설정(소품,컨텍스트){ //출력 {제목: 상위 컴포넌트가 전달한 값} console.log('props==>',props.mytitle); // 다른 사람의 제목 출력 [값을 얻기 위해 컨텍스트를 사용하고 수락하기 위해 소품을 사용할 필요가 없음] console.log('context==> ',context.attrs.othertitle); // 컨텍스트가 수락하기 위해 props를 사용할 필요가 없기 때문에 정의되지 않은 출력이 됩니다. console.log('contextmytitle==> ',context.attrs.mytitle); 함수 sonHander(){ context.emit('sonclick','하위 구성 요소가 상위 구성 요소에 전달되었습니다.') } {sonHander} 반환 } }); </script>
3. 하위 구성 요소는 상위 구성 요소
<template>에 이벤트를 전달합니다.
<div @click="sonHander"> 나는 하위 구성 요소의 데이터입니다</div> </템플릿> <스크립트> 'vue'에서 가져오기 { 정의구성요소, 설정 }; 기본 정의 내보내기({ 이름: 'NoCont', 소품:{ 내 제목:{ 유형:객체 } }, 설정(소품,컨텍스트){ 함수 sonHander(){ context.emit('sonclick','하위 구성 요소가 상위 구성 요소에 전달되었습니다.') } {sonHander} 반환 } }); </script>
4. 이벤트 디스패칭을 최적화합니다.
두 번째 매개변수 컨텍스트가 객체
이고 객체에 attrs, Slots 및 Emit의 세 가지 속성이 있다는 것을 알고 있습니다.
이벤트를 디스패치할 때<template>
을 직접 사용해도 괜찮습니다
.<div @click="sonHander"> 나는 하위 구성 요소의 데이터입니다</div> </템플릿> <스크립트> 'vue'에서 가져오기 { 정의구성요소, 설정 }; 기본 정의 내보내기({ 이름: 'NoCont', 소품:{ 내 제목:{ 유형:객체 } }, setup(props,{속성,슬롯,방출}){ //이벤트 전달을 위해 직접 내보내기 사용 function sonHander(){ Emit('sonclick','하위 구성 요소가 상위 구성 요소에 전달되었습니다.') } {sonHander} 반환 } }); </script>
5. 상위 구성 요소가 전달한 값을 가져옵니다.
props 매개 변수를 사용하여 값을 가져오고
attrs를 사용하여<template>
값을 가져옵니다
.<시간/> <h2>하위 구성요소</h2> <div @click="sonHander"> 나는 하위 구성 요소의 데이터입니다</div> <h2>==>{{ mytitle }}을 수신하기 위해 props 문을 사용했습니다.</h2> <h2>매개변수 attrs를 사용하여 ==>{{ attrs.othertitle }}을 얻습니다.</h2> </템플릿> <스크립트> 'vue'에서 가져오기 { 정의구성요소, 설정 }; 기본 정의 내보내기({ 이름: 'NoCont', 소품:{ 내 제목:{ 유형:객체 } }, setup(props,{속성,슬롯,방출}){ 함수 sonHander(){ Emit('sonclick','하위 구성 요소가 상위 구성 요소에 전달되었습니다.') } {sonHander,attrs}를 반환합니다. } }); </script>
자세한 내용은 vue3의 설정 함수 매개변수에 대한 설명입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!