Vuejs 구성 요소-props 데이터 전달 인 스 턴 스 코드

이 자 료 는 공식 문서 에서 나 왔 다.http://cn.vuejs.org/guide/components.html#Props
본 고 는 공식 문 서 를 바탕 으로 더욱 세밀 한 설명 이 고 코드 가 더 많 고 완전 하 다.
쉽게 말 하면 초보 자가 읽 기 에 더욱 적합 하 다.
props 데이터 전달
① 구성 요소 인 스 턴 스 의 역할 영역:
고립 된 것 입 니 다.쉽게 말 하면 구성 요소 와 구성 요소 사이 에 같은 이름 의 속성 이 있어 도 값 은 공유 되 지 않 습 니 다.

<div id="app"> 
  <add></add> 
  <del></del> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      "add": { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      }, 
      del: { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "456"}; 
        } 
      } 
    } 
  }); 
</script> 

렌 더 링 결 과 는:
2 개의 버튼,첫 번 째 값 은 123 이 고 두 번 째 값 은 456 입 니 다.(그들 은 모두 btn 이지 만)
② props 바 인 딩 정적 데이터 사용:
【1】이 방법 은 문자열 을 전달 하 는 데 사용 되 며,값 은 부모 구성 요소 의 사용자 정의 요소 에 적 혀 있 습 니 다.
【2】아래 예제 의 작성 법 은 부모 구성 요소 data 속성 중의 값 을 전달 할 수 없습니다.
【3】템 플 릿 의 data 속성 중 같은 이름 의 값 을 덮어 씁 니 다.
예제 코드:

<div id="app"> 
  <add btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      } 
    } 
  }); 
</script> 

이런 문법 에서 btn 의 값 은 h 이지 123 이 아니 라 hello 입 니 다.
【4】낙타 봉 표기 법
만약 에 플러그 인 이 낙타 봉 식 이 고 html 태그 에 html 의 특성 상 대소 문자(예 를 들 어 LI 와 li 가 같은 것)를 구분 하지 않 기 때문에 html 태그 에서 전달 할 값 은 짧 은 횡선 식(예 를 들 어 btn-test)으로 대소 문 자 를 구분 해 야 합 니 다.
props 의 배열 에 서 는 플러그 값 과 일치 하여 낙타 봉 식(예 를 들 어 btnTest)으로 써 야 합 니 다.
예 를 들 면:

props: ['btnTest'], 
template: "<button>btn：{{btnTest}}</button>", 

올 바른 표기 법:

<add btn-test="h"></add> 

만약 삽입 값 이 짧 은 횡선 식 을 쓰 거나 html 라벨 을 낙타 봉 식 으로 쓰 면 정상적으로 효력 이 발생 하지 않 습 니 다.(플러그 인 을 낙타 봉 식 으로 쓰 지 않 는 한 대소 문자 의 제한 을 뛰 어 넘 어야 합 니 다)
③ props 바 인 딩 동적 데이터 이용:
쉽게 말 하면 하위 구성 요소 의 특정한 플러그 인 을 부모 구성 요소 의 데이터 와 일치 하 게 하 는 것 입 니 다.
표준 쓰 기 는(v-bind 를 이용 하여):

<add v-bind:     ="      "></add> 

코드

<div id="app"> 
  <add v-bind:btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {'btn': "123"}; //            
        } 
      } 
    } 
  }); 
</script> 

설명:
【1】btn 이 사용 하 는 부모 구성 요소 data 의 h 값;
【2】하위 구성 요소 의 data 함수 에서 반환 값 이 덮어 졌 습 니 다.
【3】즉,v-bind 를 사용 하 는 것 은 부모 구성 요 소 를 사용 하 는 값(속성 명 에 따라)이 고,v-bind 를 사용 하지 않 는 것 은 탭 의 수 치 를 문자열 로 사용 하 는 것 입 니 다.
【4】여전히 props 를 사용 해 야 합 니 다.그렇지 않 으 면 그 는 자신의 data 에 있 는 btn 의 값 을 사용 할 것 입 니 다.
④ 글자 의 양 과 동태 문법:
【1】쉽게 말 하면 v-bind 를 추가 하지 않 고 문자 의 양 을 전달 합 니 다.즉,문자열(예 를 들 어 1 도 number 형식 이 아 닌 문자열)입 니 다.
【2】v-bind 를 더 하면 JS 표현 식 을 전달 합 니 다(따라서 부모 구성 요소 의 값 을 전달 할 수 있 습 니 다).
【3】v-bind 를 추가 한 후 부모 구성 요소 의 값 을 찾 을 수 있다 면 부모 구성 요소 의 값 을 사용 합 니 다.대응 하 는 것 이 없 으 면 js 표현 식(예 를 들 어 1+2 를 3 으로 보고{a:1}을 대상 으로 본다).
코드:

<div id="app"> 
  <add v-bind:btn="1+2"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>" 
      } 
    } 
  }); 
</script> 

이 btn 의 값 은 3 입 니 다.(v-bind 를 추가 하지 않 았 을 때 문자열 의 1+2 가 아 닙 니 다.)
⑤ props 의 바 인 딩 유형:
【1】쉽게 말 하면 단 방향 바 인 딩(부모 구성 요 소 는 하위 구성 요소 에 영향 을 줄 수 있 지만 반대로 안 됩 니 다)과 양 방향 바 인 딩(하위 구성 요소 도 부모 구성 요소 에 영향 을 줄 수 있 습 니 다)으로 나 눌 수 있 습 니 다.
【2】단 방향 바 인 딩 예제:(기본 값 또는.once 사용)

<div id="app"> 
     ： 
  <input v-model="val"><br/> 
     ： 
  <test v-bind:test-Val="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['testVal'], 
        template: "<input v-model='testVal'/>" 
      } 
    } 
  }); 
</script> 

설명:
부모 구성 요소 의 값 이 변경 되면 하위 구성 요소 의 값 도 변 경 됩 니 다.
하위 구성 요소 의 값 이 변경 되면 부모 구성 요소 의 값 은 변 하지 않 습 니 다.부모 구성 요소 의 값 을 다시 수정 하면 하위 구성 요 소 는 다시 동기 화 됩 니 다.
또한 주의해 야 할 것 은 하위 구성 요소 가 동기 화 바 인 딩 을 하려 면 하위 구성 요소 의 input 는 v-model 이 어야 합 니 다.value 속성 이 아 닙 니 다.(그러면 단일 항목 만 바 인 딩 할 수 있 고 하위 구성 요소 의 값 을 수정 하면 바 인 딩 을 잃 을 수 있 습 니 다)
【3】양 방향 귀속:
"sync"를 수식어 로 사용 해 야 합 니 다.
예 를 들 어:

<div id="app"> 
     ： 
  <input v-model="val"><br/> 
     ： 
  <test :test.sync="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['test'], 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script> 

효 과 는 네가 어떤 값 을 바 꾸 든 지 간 에 다른 하 나 는 따라서 변동 할 것 이다.
【4】props 검증:
쉽게 말 하면 구성 요소 가 데 이 터 를 가 져 올 때 검증 을 하고 조건 에 맞 을 때 만 사용 합 니 다.
쓰기 방법 은 props 를 하나의 대상 으로 바 꾸 고 값 이 대상 인 key 로 검증 되 며 검증 조건 은 key 와 대응 하 는 value 입 니 다.
예 를 들 면:

props: { 
  test: { 
    twoWay: true 
  } 
}, 

test 라 는 변수 가 양 방향 으로 연결 되 어 있 는 지 검증 합 니 다.그렇지 않 으 면 잘못 보고 합 니 다.(이것 은 단 방향 바 인 딩 을 검증 하 는 데 사용 할 수 없습니다).
예제 코드 는 다음 과 같다.

<div id="app"> 
     ： 
  <input v-model="val"><br/> 
     ： 
  <test :test="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components:{ 
      test:{ 
        props: { 
          test: { 
            twoWay: true 
          } 
        }, 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script> 

더 많은 인증 유형 은 공식 튜 토리 얼 을 보십시오.http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.