vue 에서 component 구성 요소 의 props 사용 에 대한 자세 한 설명

2194 단어 vueprops
본 고 는 vue 에서 component 구성 요소 의 props 사용 에 대한 상세 한 설명 을 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
props 사용법

Vue.component('my-component',{ 
       props:['message'], 
      template:'<div class="tem1">{{message}}</div>' 
    }); 
<my-component message="hello"></my-component>
메모:props 의 성명 은 template 앞 에 놓 아야 합 니 다.
props 는 인 스 턴 스 의 변수 할당 을 사용 할 수 있 습 니 다.
전역 구성 요 소 는 prop 를 사용 하 는 동작 을 가 져 올 수 있 습 니 다.
다음 예 는 message 입 니 다.먼저"hello!!!"로 렌 더 링 합 니 다.클릭 이벤트  zan 방법 을 다시 comdata,message 할당 으로 호출 합 니 다.
하지만 comdata 만 표시 되 어 message 의 값 표시 에 영향 을 줄 수 없습니다.

 <div id="app"> 
    <my-component v-bind:message='message'></my-component> 
  </div> 
  </body> 
  <script> 
    Vue.component('my-component',{ 
       props:['message'], 
      template:'<div v-on:click="zan">{{comdata}}<div>{{message}}</div></div>', 
      data:function(){return {comdata:this.message}}, 
      methods:{ 
        zan:function(){ 
          this.comdata=this.message+'vue'; 
      this.message=this.message+'vue'   
        } 
      } 
    }); 
 
    var app=new Vue({ 
      el:'#app', 
      data:{message:'hello!!!'} 
    }) 
 </script> 

prop 검증
구성 요 소 는 props 에 인증 기능 을 제공 합 니 다.

props:{propName: 
  { 
    typpe:[Number,String,Boolean,Function,Array,Object], 
    default:function(){ 
      return {name:'weng'} 
    }, 
    validator:function(value){ 
      return value.length>3 
    } 
  } 
   
} 
ps:type 사용자 정의 instanceof 검 측 사용 가능
vaidator 인증 은 개발 버 전 vuejs 에서 콘 솔 에서 출력 되 어야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기