Vue基礎学習の---Propを通じてサブコンポーネントにデータを伝達する

1133 ワード

一、Propの大文字と小文字(camelCase vs kebab-case)
HTMLのプロパティ名は大文字と小文字が敏感ではないため、ブラウザはすべての大文字を小文字として解釈します.これは、DOMのテンプレートを使用する場合、camelCase(アルパカ命名法)のprop名には、等価なkebab-case(短横線区切り命名)の命名が必要であることを意味します.

Vue.component('blog-post', {
  //   JavaScript    camelCase  
  props: ['postTitle'],
  template: '{{ postTitle }}'
})

文字列テンプレートを使用すると、この制限は存在しません.
Propタイプ
ここでは、文字列配列としてリストされているpropのみが表示されます.

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

ただし、通常、各propに指定した値タイプがあることを望んでいます.この場合、オブジェクト形式でpropをリストできます.これらのプロパティの名前と値は、それぞれpropの名前とタイプです.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

これは、コンポーネントにドキュメントを提供するだけでなく、エラーのタイプが発生したときにブラウザのJavaScriptコンソールからユーザーにプロンプトを表示します.このページの次の部分では、タイプチェックや他のprop検証が表示されます.ただし、通常、各propに指定した値タイプがあることを望んでいます.この場合、オブジェクト形式でpropをリストできます.これらのプロパティの名前と値は、それぞれpropの名前とタイプです.

git commit コマンドを入力したあと git remote add でbitbucket.org にリポジトリを作成してみた。

WDCPインストールXCache最新バージョン3.2.0