컴포넌트 간 통신 Vue--

컴포넌트 간 통신

세 가지의 구성 요소 간 통신 :

• 소품 부모 구성 요소는 서브 어셈블리에 데이터를 전달할
• $ 방출 사용자 정의 이벤트 (하위 구성 요소는 상위 구성 요소에 데이터를 전달)
• 슬롯 슬롯 콘텐츠를 배포

구성 요소 간의 통신은 다음과 같은 규칙을 따라야합니다 :

• 상위 구성 요소의 데이터를 수정하지 마십시오 서브 어셈블리에 직접 전달
• 하나 개의 구성 요소의 경우는 이것에 사용되는 초기화, 초기화 데이터, 초기화 데이터는 복수의 구성 요소가 복수의 구성 요소가 부모 구성 요소 내에서 초기화 경우에 사용되어야하는지 표기 조립.
• 된 데이터 요소는 어셈블리에 정의되어야 공정 (기능) 갱신 데이터를 초기 환경.

서브 어셈블리 소품 데이터 전송

1. 명령문 구성 요소 개체에서 지정하는 옵션 소품

CONST를 MyComponent = {
    템플릿 : ' < DIV > </ DIV > `
    소품 : 여기에 다음과 같은 세 가지 방법의 가치,
    구성 요소 : {
    }
}

방법 1 : 속성 이름을 전송 지정 배열을 확인합니다.

소품 : "ID가 ','이름 ','급여 ','commentIds ','저자 ','getEmp 'isPublished']

두 번째 방법 : 지정된 속성의 이름과 데이터 유형 배달, 개체를 확인합니다.

소품 : {
   ID 번호,
   이름 : 문자열,
   급여 : 수,
   isPublished : 부울,
   commentIds : 배열,
   저자 : 개체,
   getEmp : 기능
}

세 가지 방법 : 지정 속성 이름, 데이터 유형, 필요성, 기본 값

소품 : {
   이름 : {
      입력 문자열을,
      필수 : 사실,
      기본 : 'Zou는'
    } 
  ... ...
}

2. 참조 컴포넌트는 동적으로 V-결합에 의해 할당되면

< 내 구성 요소 V-바인딩 : ID = "2" : 이름 = "멩" : 급여 = "9999" : - 게시 = "true"를 : 코멘트-ID를 = "[1, 2]" 
: 저자 = "{ 이름 : '앨런'} " : GET-EMP ="getEmp "  > 
</ 내 구성 요소 >

상위 구성 요소의 내용을 살펴 보자

( 함수 () {
    CONST 템플릿 = '<div 클래스 = "COL-SM이 -9- COL-SM 오프셋 -3- COL-MD-10-COL MD 오프셋 -2- 메인">
        
   　　　　 //이 함으로써 V 바인드 조립체 부모 요소에 전달 함유량 : 상기의 이름을 용이하게하기 위해, 정의 할 수 이해 동일한 변수 이름 일반 전송 및
        <대시 : 취미 = "취미"@ delete_hobby = "deleteHobby"> </ 대시>


      </ DIV>`

    window.AppHome = {
        템플릿은 // 템플릿 : 템플릿, 

        데이터 () { // 상위 구성 요소의 정의는 서브 어셈블리 콘텐츠를 전달하는 
            반환 {
                취미 : '수면'코딩 ','재생 완두콩 ','판독 ' ,]
                
            }
        },


        구성 요소 : { // 대시 보드와 같은 서브 어셈블리 APPHOME의 HomeList 
            대시 보드, // 대시 보드 : 대시 보드 
            HomeList // HomeList : HomeList 
        }
    }
}) ()

이러한 상위 구성 요소 작성되었다가, 서브 어셈블리의 내용을 살펴

( 함수 () {
    CONST 템플릿 =`<DIV 클래스 = "행 자리">

    // 사용 부모 구성 요소는 서브 어셈블리 데이터를 건너 
      <DIV V- 에 대한 = "취미에 (취미, 인덱스)"키 = "인덱스"클래스 = "COL 6-XS-SM-COL 3 자리..">
        <H4> 취미 {{}} </ H4>  
        <스팬 클래스 = "텍스트 음소거">
          <a href="#" @click="deleteHobby(index)"> 删除 </a>를
        </ SPAN>
      </ DIV>
    
  </ DIV>`

    window.Dashboard = {
       // 현재 부모 컴포넌트의 속성 선언 송신 수신 조립체 
        [ '취미'소품을 ,]
        
        템플릿 // 템플릿 : 템플릿 
    }
}) ()

위의 방법들은 기존의 값을 사용하여 다음 방법으로이 방법을보고 세

부모 구성 요소

( 함수 () {
    템플릿 CONST =`<DIV 클래스 = "COL. 9-SM-SM-오프셋 COL COL을. 3 COL은-10-MD-2 MD는 오프셋 메인"> 

        // 하려면 서브 어셈블리 홈 목록에서 값을 전달
        <홈 목록 : empList = "empList"deleteEmp = "deleteEmp"> </ 홈 목록>

      </ DIV>`

    window.AppHome = {
        템플릿은 // 템플릿 : 템플릿, 

        데이터 () { // 상위 구성 요소의 정의는 서브 어셈블리 콘텐츠를 전달하는 
            반환 {
                empList :
                    {ID : 1, 이름 : '小1'급여 '80001' }
                    {ID : 2, 이름 : '小2', 급여 : '80002' }
                    {ID : 3, 이름 : '小3'급여 '80003' }
                    {ID : 4, 이름 : '小4'급여 '80004' }
                    {ID : 5, 이름 : '小5'급여 '80005' }
                ]
            }
        },

        구성 요소 : { // 대시 보드와 같은 서브 어셈블리 APPHOME의 HomeList 
            대시 보드, // 대시 보드 : 대시 보드 
            HomeList // HomeList : HomeList 
        }
    }
}) ()

서브 어셈블리 HomeList

;(함수 () {
    CONST 템플릿 =` < DIV 클래스 = "테이블 반응" > 
    < 표 클래스 = "테이블 테이블 스트라이프" > 
      < THEAD > 
        < TR > 
          < 일 > ID </ 일 > 
          < 일 >姓名</ 일 > 
          < 일 >工资</ 일 > 
          < 제 >操作</ 일 > 
        </ TR > 
      </ THEAD >
      < TBODY>

          <! - 这里还有一个子组件항목 -> 
        < 항목 V-에 대한 "empList에서 (EMP, 인덱스)"= : 키 = "emp.id" : EMP = "EMP" : deleteEmp = "deleteEmp" : 인덱스 = "인덱스" /> 
      </ TBODY > 
    </ 테이블 > 
  </ DIV > `
    
    window.HomeList = {
<! - 현재의 서브 - 어셈블리 수신 부모 컴포넌트 전송 속성 선언 ->
     
        소품 : {
          empList : 배열
          deleteEmp : 기능
        },
        주형, 
        구성 요소 : { <! - 서브 어셈블리 항목 ->
          안건 
        }
    }
}) ()

서브 어셈블리 항목

;(함수 () {
    CONST 템플릿 = ' < TR > 
    < TD > {{emp.id}} </ TD > 
    < TD > {{emp.name}} </ TD > 
    < TD > {{emp.salary}} </ TD > 
  < / TR > `

  window.Item = {
      소품 : {
        {// 필요한 경우 / 속성 이름 / 데이터 유형을 지정 : EMP 
            입력 : 개체,
            필수 : 사실
        },
        deleteEmp : 기능,
        색인 번호
      },

      주형
  }
}) ()