Vue+typescript 구성 요소 간의 통신(하위 구성 요소가 여러 값을 전달하고 부모 구성 요소의 사용자 정의 파라미터를 포함)

우선ts에서 속성, 템플릿 이름 등은 모두 가로줄과 대문자로 변환된다. 예를 들어 부모 구성 요소가 이면 하위 구성 요소의 이름은 ColorDrawer.vue이다.
그 다음으로 ts에서 모두 장식기로 아래의 내용이 무엇인지(부품인지, 신호발사기인지,prop속성 등)를 설명해야 하기 때문에 반드시 장식기를 도입해야 한다.
다음은 부모 구성 요소에 하위 구성 요소를 도입하고 구성 요소를 등록합니다. 구성 요소를 도입하는 것은 js와 같습니다.

import ColorDrawer from './moudle/ColorDrawer'

등록은 component 장식기 아래에 있어야 합니다. 여기에 두 층의 component가 있습니다. 하나를 빠뜨리면 오류가 발생할 수 있습니다. import { Component, Prop, Vue, Emit, Mixins, Watch } from 'vue-property-decorator'입니다. 그리고 이 @Component는 장식기입니다. 아래의class Color Father를 장식하는 데 사용됩니다. 장식기와 피장식류 사이에 다른 문구를 삽입할 수 없습니다. 그렇지 않으면 TS2769: No overload matches this call.을 잘못 보고할 수 있습니다.

 //     
  @Component({
    components: {
      ColorDrawer
    }
  })
  export default class ColorFather extends Mixins(UploadMixin){	
  }

그리고 하위 구성 요소를 만들면 부모 구성 요소에서 인용할 수 있습니다. 그러나 단일한 전시가 아니라면, 예를 들어 이 하위 구성 요소가 서랍이라면, 하위 구성 요소의 열기/닫기/서랍의 내용을 제어해야 합니다.이 경우 부모 구성 요소가 서브 구성 요소에 값이나 함수를 전달해야 합니다.부모 구성 요소가:color-list에 테스트 값을 전달하고, 하위 구성 요소의 prop은 ColorList에 테스트 값을 부여합니다.

하위 구성 요소 prop 수식 및 감청 형식입니다. 이것은 Object 형식의 사전 서열입니다. 하위 구성 요소 템플릿 내부에서 테스트 값을 임의로 사용할 수 있습니다. 하위 구성 요소 자체가 정의한 데이터와 같지만 수정할 수 없습니다.

  @Prop({
    type: Object,
    required: true,
    default: () => ({})
  }) private test!: any

물론 부모 구성 요소가 함수를 전달한다면 서브 구성 요소가 전달하는 함수를 많이 정의한 것과 같다.

//    
<child  :before-upload="test"></child>
// ts  
  test (file: any) {
    if (file.size < 1024 * 1024) {
   		return false
    }
    else
    	return true
  }

즉, 서브어셈블리 내부에서 이 함수를 자유롭게 호출할 수 있다.

  @Prop(uploadProps.test)
  public test!: Function
  //     
   ChildTest (file: any) {
    if (this.test(file)) {
      //         test       
    }

마지막으로 서브어셈블리가 부모 어셈블리와 같은 값을 전달합니다.emit는 신호를 연결하는 것 외에 반드시 함수를 연결해야 한다. 이test 함수는 반복적으로 사용할 수 있다. 이것은 서브 구성 요소에서test 함수를 만나면bindSend의 신호를 보내는 것을 의미한다.여기 전달된 매개 변수는 msg입니다.

@Emit('bindSend') test(msg: string){}; // send            

부모 구성 요소는 사용자 정의 방법인 bindSend를 통해 전달된 매개 변수 msg를 수신하고 함수propMsg를 터치합니다. msg는 기본적으로 전달된 매개 변수입니다.

<Child @bindSend="propMsg"/>
propMsg(msg: string){
	this.msg = msg;
 }

물론 Decorators are not valid here은 생략된 문법이다. 매개 변수가 @bindSend="propMsg"과 같으면 사용자가 정의한userDefined가 없으면 @bindSend='propMsg($event,userDefined)'이다.그러나 매개 변수가 두 개 이상의 매개 변수가 있을 때는 @bindSend="propMsg"에 해당하지만 이때arguments는 수조로 변했다.이때 수신된 msg는 수조이고 msg[0]는 그 중의 첫 번째 매개 변수로 추정된다.