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 중국어 웹사이트의 다른 관련 기사를 참고하세요!
