VUE 통신 구성 요소

통신 컴포넌트 14가지

1. 소품

　　이 속성은 아들에 대한 아버지, 값이 배열 또는 객체가 될 수있는 소품

// 배열이 :하지 않는 것이 좋습니다 
소품을 : [] 

// 객체 
소품을 : { 
 inpVal : { 
  유형 : 번호, // 입력 값을 정의 유형
   // 유형 값 수도 문자열, 숫자, 부울, 배열, 객체, 날짜, 기능 , 기호
   // 타입 생성자도 정의 될 수 있으며, instanceof를 확인하여 확인할 수 
  필요한 : true로 , // 전송이 여부를 
  기본 : (200)은 ,   // 기본 값, 또는 함수의 디폴트 값에서 객체의 배열이 공장해야합니다 기본적으로 가져 오기 : () => [] 
  검사기 (값) {
     // 이 값은 다음 문자열과 일치해야합니다 
    반환 [ ' 성공 ' , ' 경고 ' , '위험 ' ] .indexOf (값) ==! - 1 
  } 
 } 
}

2. $는 방출

　　이 아버지에서 아들 방법, 사실, 부모 구성 요소의 사용자 정의 이벤트를 트리거도 매우 일반적입니다

1  // 부모 구성 요소 
(2) <홈 @ 제목 = "제목">
 3.  // 조립체 
(4).  이 본 $ EMIT ( '제목', [{제목 : "이 제목이고 '}).

3. vuex

　　vuex는 상태 매니저,

　　때문에 경우, 내부 단순한 통신 더 많은 데이터 항목을 공유하기위한 별도의 플러그인, 그것은 더 많이 사용하는 것

. 한  데이터웨어 하우스에 저장 주 :. 정의, $ store.state 또는 mapState은이 액세스 할 수 있습니다
 2  . 값 저장소를 가져 오기, 속성 저장소를 계산하기 위해 고려 될 수있다, 또는이 $의 store.getter 방법 : 게터 MapGetters 액세스
 . 4  돌연변이 : 이 돌연변이는 직접 변경 값을 저장하기 때문에, 동기화하기위한 이유 동기 변화 저장 값은,
 (5)           .이 mapMutations 의해 변화 호출을 추적 할 수없는 비동기 경우 VUE 동작이 기록 될 것이다
 6 동작을 비동기 통화 기능함으로써 매장 변경 돌연변이를 수행 함으로써 값 은이 . $ mapActions 디스패치 또는 액세스
 8 개. 모듈 : 모듈, 상태도, 입구 ... 해체를 통하여 모듈들로 분할하고, 마지막으로 도입 될 수 있는지

4. $에 바인드합니다 및 $ 청취자

　　두 개의 새로운 특성이 일반적인 아니지만, 고급 사용이 매우 일반적인 2.4.0;

　　$ attrs에 시나리오 : 아들에 대한 아버지는 많은 가치가있는 경우에, 당신은 하위 어셈블리의 복수를 정의해야

　　소품 해결 : attrs에이 소품 값이 부모 자식 전송에 ($ 전용 소품 등록되지 않은 재산이있을 것이다하는 바인드합니다) 정의되지 얻을 -> (클래스와 스타일을 제외)을

1  // 부모 구성 요소 
(2) <메인 타이틀 = imgUrl에 대한 = "80"= 폭 "80"높이 "이 제목이고"= / "imgUrl에 대한">
 . 3  
. 4  // 조립체 
. 5  마운트 () {
 . 6    CONSOLE.LOG ( 은이 . ) $ attrs에 // {제목 : "80", 높이 : "80"imgUrl에 대한 : 폭 "이 제목이고" "imgUrl에 대한"} 
. 7 },

. (1 개)  소품 : {
 2    폭 : {               // 등록 조립체 소품 후 부모 요소 폭은 다음 $에 attrs에 실패
 3.      타입 : 스트링
 (4).      기본값 : '
 . 5    }
 . 6  }
 . 7  마운트 () {
 . 8    CONSOLE.LOG ( 이 본 $ 바인드합니다.) // {제목 : "이 제목이고,"높이 "80"imgUrl에 대한 "imgUrl에 대한"} 
. 9 },

$ 리스너 장면은 : 부성분은 용액의 부모 구성 요소를 호출하는 필요 부품의 높은 수준을 생성 할 때 ----- V 자에 = "수신기"를 통과 할 수있는 내부 구성 요소의 방법 부모 구성 요소를 매우 유용 :

1  // 부모 구성 요소 
(2) <홈 변화 @ = "변화"/>
 . 3  
. 4  // 조립체 
. 5  마운트 () {
 . 6    CONSOLE.LOG ( 이 . 청취자 $) // 변경 이벤트를 얻을 
7 }

$ inheritAttrs

구성 요소가 등록 속성은 일반 html 요소의 특성으로 렌더링됩니다되지 내

1  // 부모 구성 요소 
(2) <메인 타이틀 = imgUrl에 대한 = "80"= 폭 "80"높이 "이 제목이고"= / "imgUrl에 대한">
 . 3  
. 4  // 조립체 
. 5  마운트 () {
 . 6    CONSOLE.LOG ( 은이 . 바인드합니다 $) // {imgUrl에 대한 '80': 제목 : "이 제목이고,"폭 "80"높이 "imgUrl에 대한"} 
7.  },
 8.  
9. inheritAttrs 디폴트 값 에 해당하는 , 즉 부모 컴포넌트의 속성에 루트 구성 요소에 표시됩니다
 (10) 로 설정하면 거짓 숨 깁니다

5. 和 제공 분사

　 새의 2.2.0 버전

　　사용 시나리오 : 아무리 하류에서 상류와의 관계의 설립 이후 적용하려면 시간이 항상 얼마나 깊은 구성 요소 수준, 그리고에서 구성 요소 따라 모든 미래 세대에게 조상의 주입을 할 수 없습니다.

　　제공 : 객체 또는 객체 함수가 반환을

　　 주입 : 문자열 배열 또는 개체를 개체 키 바인딩 로컬 이름이고

. (1) 의 <template> // 친 요소
 2      <div ID = "애플리케이션">
 . (3)      </ div>
 . 4 </ 서식>
 . 5      <script>
 . 6          내보내기 기본 {
 . 7 개              데이터 () {
 . 8                      창 {
 9.                          DATAS [
 10                              {
 11.                                  ID :. 1 ,
 12은                                  '제품'라벨
 13                              }
 14                              {
 15                                 ID :. 1 ,
 16                                  : 레이블의 제품 2 '
 . 17                              }
 18는                              {
 19.                                  ID :. 1 ,
 20는                                  라벨'세 제품의
 21이다                              }
 (22)이다                          ]
 23                      }
 24              }
 25              {제공
 (26)가                  복귀 {
 27                      DATAS : 이 본는 .datas
 28                  }
29              }
 30          }
 31      </ script>

<템플릿>     // 后代组件 
    <DIV> 
        <UL> 
        <LI의 V- 에 대한 "datas에서 (항목, 인덱스)"= 키 = "인덱스"> 
            {{item.label}}
         </ 리> 
        </ UL> 
    </ DIV> 
</ 템플릿> 
    <script> 
        수출 기본 { 
            주입 : [ 'datas' ] 
        }
     </ SCRIPT>

참고 : 제공하고 바인딩 응답 할 수 없습니다 주입. 이것은 의도적이다. 당신이 리스너 객체를 전달할 경우, 다음 개체 또는 속성에 응답 할 수 있습니다.

응답 예 :

제공 부모 구성 요소를 
  제공합니다 () { 
    반환 { 
      map_nodeObj : {map_node : 다음은이 .OBJ}
       // 팁 : 제공하고 바인딩 응답을 주입 할 수 없습니다. 이것은 의도적이다. 모니터링 할 수있는 개체를 전달할 경우, 다음 개체 또는 속성에 응답 할 수 있습니다. 
    } 
  }, 

횡단 소개 
  를 주입 : { 
    map_nodeObj를 : { 
      기본 : () => {
         반환 {map_node : '0' } 
      } 
    } 
  } 
사용 : 다음은이 .map_nodeObj.map_node 

// 실행 시퀀스 
데이터가 
제공 
만든   // 이에 $ EL 위상이 제 privide에서 처리 로직 생성되지 않은, 구성 요소의 자식은 값이 취할 수 분사 
탑재 
...

6. $ 부모 和의 $ 어린이

　 $ 부모가 : 상위 구성 요소를 참조 구성 요소의 컬렉션을 반환

　　사용 :.이 $ 부모 (현재 구성 요소는 부모 구성 요소가없는 경우, 현재 구성 요소에 반환)

　　$ 자녀 : 세대, 서브 어셈블리를 의미 요소의 컬렉션을 반환

　　사용 :.이 $ 어린이 (당신이 하위 어셈블리의 순서를 알고 명확하게 할 수있는 경우 첨자를 나타내는 데 사용할 수 있습니다)

주 : (1) 구성 요소는 하나 개의 루트를 가질 수 있습니다

　　　(2)이 조립체. $ 상위에 사용될 수있다. 속성 값 또는 함수

　　　(3) 부모 구성 요소 내에서 사용될 수있는이. 아이 $ [I]. 부동산

　　　(4) 이때 유의

7. 심판 및 $ 심판

　　세 가지 사용 심판이 있습니다 :

　　(1) (REF)이 함께 인수 공통 요소에 적용 하였다. $ Refs.name의 DOM 요소는

　　(2) (REF)이 컴포넌트 인스턴스에 의해 획득 $ Refs.name ,. 조립체에인가 된 모든 방법을 사용할

　　참조 및 V-의 경우 함께

8. $ 루트

　　$ 루트 전역 속성

앱이 (가)하자 = 새로운 새로운 뷰 ({ 
    : EL '#app' ,
     // 글로벌 데이터 또는 변경 될 수 있습니다 다른 페이지의 형성 
    데이터 : 기능 () {
     반환 { 
        S : '' 
    } 
    }, 
    라우터, 
    저장, 
    템플릿 : '<라우터 -보기> </ 라우터-보기> ' 
}) 

// a.vue 
    은이 . root.s = $' '설정의 속성 // b.vue 
    을 console.log ( 다음은이 . $ root.s)   // 세트 의 속성

9.이 .sync

　　구문 설탕이 .sync으로, 재 도입에서 2.3.0 .sync를 수정은 컴파일 시간, 자동으로 V-에 리스너 부모 구성 요소 속성을 업데이트하도록 확장 될 것이다

// 부모 요소 
<COMP : foo.sync = "바"> </ COMP> // 컴파일 시간을 연장됩니다 : 
<COMP : foo는 = "바"@Update : foo는 = "발 => 바 = 발"> </ COMP> // 서브 어셈블리 // 서브 어셈블리를 명시 적으로 업데이트 이벤트를 트리거 할 필요가 foo는의 값을 업데이트하는 데 필요한 때 : 
// 그래서 트리거 서브 어셈블리가 $ 방출 방법에 의해 변경 될 수 갱신 은이 $ EMIT ( '업데이 트를. : foo는 'NEWVALUE)

10. V 슬롯 소켓

　　2.6.0 새로운

　　(1) 슬롯 익명

　　(2)라는 슬롯

　　(3) 범위 슬롯

VUE 통신 구성 요소

추천