vueprop 값 형식 검사 방식

2990 단어 vueprop전가검사하다
prop 값 검사 규칙
prop이 정적 전송 값이면 String 유형이어야 합니다.
프로가 동적 전송 값이라면 임의의 형식을 검증할 수 있습니다
예를 들어 Number를 보내려면 bind를 사용해야 합니다

// 
Vue.component("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
// template ， ，  String
<blog-post postTitle="54"></blog-post>
// template ， ，  String、Number、Boolen。。。
<blog-post :postTitle="54"></blog-post>
유형 검사의 type 값은 다음 원본 구조 함수 중 하나일 수 있습니다.String Number Boolean Array Object Date Function Symboltype는 사용자 정의 구조 함수이며 instanceof를 통해 확인할 수 있습니다.
예:

// ， ：
function Person (firstName, lastName) {
 this.firstName = firstName
 this.lastName = lastName
}
// ,  Person  
Vue.component('blog-post', {
 props: {
  author: Person
 }
})
보충지식:vue중prop검증, 유형검사 및 주의사항
1、주의:null과undefined는 모든 종류의 검사를 통해
2. 배열이나 대상 유형이 기본값을 제공해야 한다면 함수를 통해 되돌아와야 한다..자세한 내용은 여기 

 props:{//  
  authInfo:{
  type:Object,
        default(){
   return{
   name:' ',
            sex:0
          }
        }
      },
      list:{
  type:Array,
        default(){
   return[
   1,2,3
          ]
        }
      }
    }
3. 사용자 정의 함수 검증 사용

    props:{
  address:{
  validator(value){
          return [' ',' ',' '].indexOf(value) !== -1
        }
      }
    }
4. 비prop의 특성: 하나의 속성이 하나의 구성 요소로 전달되지만 이 구성 요소는 상응하는 prop를 정의하지 않습니다.이 속성을 비prop 특성이라고 합니다.비prop 특성은 구성 요소의 루트 요소에 작용합니다.
프로필에 구성 요소와 요소가 정의한 속성이 포함되지 않으면비prop의 값은 구성 요소가 정의한 값을 덮어씁니다. (이 경우 비prop 계승이라고 합니다.)style과class는 예외입니다. 합병이 발생합니다.
자세한 내용은 여기
비prop 상속을 원하지 않으면 어떻게 해야 합니까?
비prop가 자동으로 구성 요소의 루트 요소에 작용하지 않으려면 vue의 구성 요소 옵션에 inheritAttrs 옵션을 추가할 수 있습니다. (이 옵션은class와 스타일의 귀속에 영향을 주지 않습니다.)
inheritAttrs:false
inheritAttrs 속성은 $attrs와 협조하여 개발자가 원하는 요소에 비prop이 작용할 수 있습니다.작용하지 않는 뿌리 원소에예:

<template>
  <div>
    <input type="text" v-bind="$attrs">  <!-- prop -->
  </div>
</template>
<script>
 export default {
 name: "sg-test",
    inheritAttrs:false,//   prop 
 }
</script>
상기 vueprop 전가 유형 검사 방식은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
[R] 데이터 전처리
Validation - 오류 코드와 메시지 처리 시리즈

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage