부모 레벨에서 v-slot 값에 접근하는 방법 - vuejs
역할 영역 슬롯 v-slot의 사용법에 대해 문서를 먼저 볼 수 있습니다
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
이제 본론으로 들어갑니다.
우리는 제3자 구성 요소validate를 사용합니다. 이 제3자 구성 요소의 슬롯은 우리에게 속성 error 값을 전달합니다. 우리는 지금 부급에서 이 error 값을 얻고 싶습니다. 간단하게 보기 위해서validate 구성 요소를 테스트로 만듭니다.
우리는 v-slot 아래에서 하나의 방법을 사용하여 error를 아버지급으로 전달하면 된다고 생각한다. 확실히 할 수 있다.https://jsfiddle.net/jswenjie/pxru6y2m/5/
문제 발생
우리의 페이지가 여러 개의validate가 있는 상황에서 모든 error를 수집해야 합니다. 그러면 우리는 하나의 그룹을 사용할 수 있습니다.https://jsfiddle.net/jswenjie/pxru6y2m/7/
in scope {{ error }} {{ sendToParent(error, x-1) }}
in parent {{ error }}
// validate
Vue.component("validate", {
data() {
return {
error: ""
};
},
mounted: function() {
setInterval(() => (this.error = Date.now()), 1000);
},
template: '<div><slot :error="error" /></div>'
});
new Vue({
el: "#app",
data() {
return {
error: []
};
},
methods: {
sendToParent(error, index) {
this.$set(this.error, index, error);
}
}
});
결과는 정확했지만 컨트롤러 아래에 Warning 경고가 발생했습니다. [Vue warn]: You may have an infinite update loop in a component render function.사순환의 문제가 있다.
문제 해결
나는 해결 방안이 하나 있다(https://javascript.shop/2019/11/get-slot-prop-in-parent-by-v-slot), 여러분 먼저 제 방안을 보지 마세요. 여러분의 사고방식에 영향을 줄 수 있습니다. 왜냐하면 저는 제 방안이 약간 복잡하다고 느끼기 때문입니다.여러분에게 더 좋은 해결 방안이 있는지 댓글로 알려주신 것을 환영합니다. 감사합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
