props

最近、同社は再使用のために分離素子を開発した.
親ページでは、APIによってリフレッシュされた1秒あたりのデータをpropsに降格する必要があります.
進行中は、公式文書をよく読む必要があります.
開発が終わった後、個人的に整理しました.

props

Passing Data to Child Components with Props

以上のタイトルはvue公式ドキュメントで紹介されているpropsの段落タイトルです.
propsは、propsオプションを使用して親コンポーネントのデータをサブコンポーネントに渡すことができます.

なお、子から親へのデータストリームは発生しない.
また、親コンポーネントを更新するたびに、サブエレメント内のすべてのpropsが最新値に更新されます.
したがって、propsの用途は以下の通りである.

1.propsで受信したデータを変更したくない場合

Vueインスタンスを作成する場合、「作成」(Created)データ、propsプロパティなどがアクティブになります.
受信した初期値がローカルにのみ書き込まれるようにデータに宣言されます.

예시)
props: ['initialDate'],
data() {
  return { Date: this.initialDate }
}

props受信データを計算する場合、

예시)
props: {
	sec:{
    	type: String,
        default: "00"
    },
    min:{
    	type: String,
        required: true
    }
    
},
computed: {
  computedTime(){
    this.min = this.min.length <= 1 ? `0${min}` : min;
    this.sec = this.sec.length <= 1 ? `0${sec}` : sec;
    return `${this.min}:${this.sec}`
  }
}

props検証

構成部品はpropsの検証の要件を指定できます.
要求が満たされていない場合、VueはブラウザのJavaScriptコンソールを通過します.
次の警告が表示されます.
[Vue warn]: Invalid prop: type check failed for prop "propsdata". Expected Number, got String.

공식문서_예시)
  props: {
    // 기본 타입 체크 (`Null`이나 `undefinded`는 모든 타입을 허용합니다.)
    propA: Number, //Number만 허용
    // 여러 타입 허용
    propB: [String, Number], //String이나 Number만 허용
    // 필수 문자열
    propC: {
      type: String,
      required: true //반드시 값을 전달받아야 함.
    },
    // 기본값이 있는 숫자
    propD: {
      type: Number,
      default: 100 //전달 값이 없을 경우 디폴트로 100 
    },
    // 기본값이 있는 오브젝트
    propE: {
      type: Object,
      // 오브젝트나 배열은 꼭 기본값을 반환하는
      // 팩토리 함수의 형태로 사용되어야 합니다. 
      default: function () {    
        return { message: 'hello' }
      }
    },
    // 커스텀 유효성 검사 함수
    propF: {
      validator: function (value) {
        // 값이 항상 아래 세 개의 문자열 중 하나여야 합니다. 
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

props検証で注意すべき点は、propsは構成部品インスタンスを作成する前に検証されるため、defaultまたはvalidator関数では、データ、計算、メソッドなどのインスタンス属性は使用できません.

n/a.結論

コンポーネントは、再使用など、さまざまな理由で常に構造化されています.
propsの場合、親コンポーネントから取得したデータと見なしたことがあります.
このように公式文書には何も漏れず、細かく指導しています.
これで、エラーがないかよく読んで確認できます.