ビューProps

8395 ワード
vue Vue props テキストリンク
Vue Props

  • props
    :propsは、親コンポーネントから子コンポーネントに渡されるデータです.

  • ビューの一方向データ属性?
    :サブコンポーネントから渡されたpropを直接渡すと、vueにエラーが表示されます.したがって、計算プロパティを使用してpropの形状を変更するか、初期値propのデータのみをローカルデータとして使用することが望ましい.

  • Propsのタイプの検証
    :propsのリストは文字列配列で定義できますが、タイプと有効性チェックをより詳細に指定できます.
    • props: {
	item: {
		type: Object, //instanceof 로 유효성을 검사하기 때문에 커스텀 생성자 객체가 올 수 있다.
		required: true,
		default: function() {
			return {}
		},
		validator: function() {
			return true;
		}
	}
}
  • プロジェクトでPropsタイプと検証を適用するコード
    • import { movieCategories } from "@/utils/constants/movie";

props: {
	categoryTitle: {
		type: String,
		required: true,
	},
   	categoryId: {
      		type: String,
              	required: true,
                validator: function(category) {
                  	// props로 전달받은 categoryId가 movieCategories에 포함되어 있으면 true를 리턴
			return movieCategories.inclues(category);
		}
    	},
}
  • v-forの鍵
    :画面にレンダリングされません.
    • 😎 vue netflix cloneプロジェクトを再設計したときの感想
    :急いでプロジェクトを完成して、いくつかの粗製乱造の地方を発見して、完成度がとても悪いと感じます.ここで、
    1)ソースの分離が悪い.utilsのhelpers.js, constant.jsがファイルを使用する場合、helpers/getImage.jsはこのようにファイルをより構造的に作成し,関数をインポートするとソースコードをより簡潔に作成できる.
    2)ビューコンポーネントをうまく使うメリットがない.素子に分けられる部分をさらに微細化し,propsを用いて素子にデータを伝達する部分を研磨した.
    3)apiを要求するコンポーネントと、apiで取得したデータをpropsで受信してレンダリングするコンポーネントは、ページをより簡潔に整理することができる.
  • 従来の方法:MovieSlider.vueにデータがない場合は、apiリクエストの結果をv-ifで映画リストをvue=>MovieSliderに転送します.
  • 変更:MovieSlide.vueでapiを要求し、データがあればMovieSwaperにデータを送信し、ない場合はエラーメッセージ=>を表示するので、MovieSwaperはデータを受信してSwiperライブラリを適用するだけでよい!
  • 変更方法2:ホームページで「高スコア」、「公開中」などの各映画データを要求し、MovieSlideに渡すと、ムービーのカテゴリをMovieSlideに渡し、各コンポーネントに基づいてapiを要求できます.
    • //MovieSlide.vue
<template>
    <div class="movieSlide">
        <h3 class="movieSlide__title">{{ categoryTitle }}</h3>
        <div v-if="isLoading">loading movies....</div>
        <template v-else>
            <!-- 데이터가 있을 경우에만 MovieSwiper에 데이터 전달 -->
            <div class="movieSlide__movies" v-if="isMovies">
                <MovieSwiper :movies="movies"></MovieSwiper>
            </div>
            <div v-else>카테고리에 해당하는 영화가 없습니다.😂</div>
        </template>
    </div>
</template>
    references
  • ビュー支柱のタイプ
    https://kr.vuejs.org/v2/guide/components-props.html#Prop-%ED%83%80%EC%9E%85
    • あなたのGraphSQL辞書
    [JS]04章変数