사용자 정의 구성 요소 기록하기
분석:
1. vue로 서브어셈블리component를 작성하는데 그 중에서 API 문서의 각종 인참, 호출 예시, 반환 매개 변수와 반환 예시 등이 서브어셈블리의props 매개 변수로 사용할 수 있다.
2. 그리고 주의해야 할 것은 서브 구성 요소가 닫기 보기 인터페이스를 눌렀을 때 닫힌 상태 값을 부모 구성 요소($emit)에 어떻게 전달하는가이다.
코드 예:
1. 서브어셈블리 섹션(서브어셈블리의 이름은 ApiWord.vue):
：
- ，
URL：
{{requestUrl}}
：
- POST
：
：
{{parse(resultExample)}}
export default {
name: "ApiWord",
props: {
title: {type: String,default: "어음 혼합 인터페이스 호출 문서"},
requestUrl: {type: String, default: "http://xx.com/services/ocr"},
dialogTableVisible: {type: Boolean, default: false},
gridParamData: {type: Array, default: [{
paramName: 'image',
paramType: 'string',
required:'네',
desc:'이미지base64 인코딩된 문자열, 이미지는 JPG, PNG, BMP 중 하나여야 합니다'
}]},
gridResultData: {type: Array, default: [{
paramName: 'errorcode',
paramType: 'int',
desc:'반환 코드;0은 성공을 나타내고 0이 아니면 오류를 나타낸다.
}]},
resultExample: {type: String}
},
methods:{
parse(str) {
return JSON.stringify(JSON.parse(str), null, "\t");
},
closed(){
//this.dialogTableVisible = false; //이 줄 코드가 있을 수 없습니다. 그렇지 않으면 오류가 발생합니다. 하위 구성 요소 내부에서props의 값을 수정할 수 없습니다.
//this.$emit('toggle', this.dialogTableVisible);
this.$emit('toggle', false); //하위 구성 요소는 $emit에서 부모 구성 요소의 사용자 정의 이벤트를 터치할 수 있습니다. (이 하위 구성 요소의 toggle 방법도 사용합니다.)
}
}
}
.el-dialog__title{
font-size: 25px;
}
.el-dialog{
width: 60% !important;
}
.el-dialog__body{
text-align: left !important;
}
.el-table th{
background: aliceblue !important;
}
pre{
padding-left: 5px;
background-color: rgb(252, 252, 252);
border: 1px solid rgb(225, 225, 232);
}
2. 부모 구성 요소 호출의 예:
>>
import ApiWord from "../components/ApiWord";
export default {
components: {
ApiWord
}
}
주: 부모 구성 요소에서 이 하위 구성 요소를 가져오려면 import이 필요합니다.그리고components 대상에 import에서 가져온 이 하위 구성 요소를 추가합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
