小道具

このページは、コンポーネントの基本を読んでいることを前提としています。コンポーネントについてまだよく知らない場合は、最初に読むことをお勧めします。

#ディレクトリ

• プロパティのケース

• #Prop Type

##静的または動的 Prop

• ## を渡す

  数値を渡します

  • ブール値を渡します

  • 配列を渡す

  • オブジェクトを渡す

  • オブジェクトを渡すオブジェクトのすべてのプロパティ
  #一方向のデータ フロー

• Prop の検証

• Type Check

  Not Prop機能

• 既存の機能の置換/マージ

  • 機能継承の無効化

#プロップケース (キャメルケースとケバブケース)

HTML 内の属性名では大文字と小文字が区別されないため、ブラウザはすべての大文字を小文字として解釈します。これは、DOM でテンプレートを使用する場合、キャメルケース プロップ名には同等のケバブケース (ダッシュ区切りの命名) 名を使用する必要があることを意味します。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

もう一度、文字列テンプレートを使用する場合、この制限は適用されません。存在しない。

---

Prop type

これまでのところ、Listed 形式の文字列配列のみを確認してきました。 props:

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

ただし、通常は、各プロパティに指定された値の型を持たせる必要があります。この時点で、オブジェクト形式でプロップをリストできます。これらのプロパティの名前と値は、プロップのそれぞれの名前とタイプです:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

これは、コンポーネントのドキュメントを提供するだけでなく、ユーザーがブラウザの JavaScript コンソールからプロンプトを表示されたときに、間違ったタイプがプロンプトされる場合にドキュメントを提供します。このページの残りの部分では、

---

型チェックとその他のプロパティの検証

について説明します。

静的または動的 Prop を渡す

---

次のように、静的な値を prop に渡すことができることはすでにご存知でしょう。

<blog-post title="My journey with Vue"></blog-post>

また、v-bind を通じて prop を動的に割り当てることができることもご存知でしょう。たとえば:

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

上記の 2 つの例では、渡す値はすべて文字列です。タイプ. ですが、実際には、任意のタイプの値を prop に渡すことができます。

#番号を入力してください

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

ブール値を渡す

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

##配列を渡す

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

オブジェクトを渡す

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

## オブジェクトを渡すオブジェクトのすべてのプロパティ

オブジェクトのすべてのプロパティを props として渡したい場合は、パラメータ # なしで v-bind## を使用できます ( # を置き換えます) ##v-bind:prop-name

)。たとえば、特定のオブジェクト

post:

post: {
  id: 1,
  title: 'My Journey with Vue'
}

の場合、次のテンプレート:

<blog-post v-bind="post"></blog-post>

は次と同等です:

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

一方向のデータ フロー

すべてのプロップは、親プロップと子プロップの間で 一方向の下向きバインディングを形成します : 親プロパティへの更新は子コンポーネントに下流に流れますが、その逆はありません。これにより、子コンポーネントが親コンポーネントの状態を誤って変更し、アプリケーションのデータ フローが理解しにくくなるのを防ぐことができます。

さらに、親コンポーネントが更新されるたびに、子コンポーネント内のすべてのプロパティが最新の値に更新されます。これは、子コンポーネント内の props を

---

変更すべきではないということを意味します。これを行うと、Vue はブラウザーのコンソールに警告を発行します。

プロップを変更しようとする一般的な状況は 2 つあります:

1.

このプロップは初期値を渡すために使用され、サブコンポーネントはそれをローカル値として使用したいと考えます。使用するプロップデータ。 この場合、ローカル データ属性を定義し、このプロパティを初期値として使用することが最善です:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2.

このプロパティはプリミティブ値として渡され、変換が必要です。

この場合、この prop の値を使用して計算プロパティを定義するのが最善です:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

JavaScript ではオブジェクトと配列は参照によって渡されることに注意してください。またはオブジェクト タイプ プロパティ、子コンポーネント内のオブジェクトまたは配列自体を変更すると、親コンポーネントの状態に

影響します。

プロパティの検証

---

既知のタイプなど、コンポーネントのプロパティの検証要件を指定できます。要件が満たされていない場合、Vue はブラウザー コンソールに警告を表示します。これは、他の人が使用するコンポーネントを開発する場合に特に役立ちます。

プロパティの検証方法をカスタマイズするには、文字列の配列の代わりに、props の値の検証要件を含むオブジェクトを提供します。例:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

prop の検証が失敗すると、Vue (開発環境のビルド バージョン) はコンソール警告を生成します。

これらのプロパティは、コンポーネント インスタンスが作成される 前に検証されるため、インスタンスのプロパティ (data、computed など) が検証されることに注意してください。 など) は、default または validator 関数では使用できません。

#型チェック

type

は次のネイティブ コンストラクターに含めることができます。 :

• 文字列

##数値

• ##ブール値

• 配列

• ##オブジェクト

• 日付

• 関数

• シンボル

• さらに、type はカスタム コンストラクターにすることもでき、

  instanceof
を通じてチェックされます。たとえば、既製のコンストラクター

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

がある場合、

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

を使用して、 author プロパティの値が

new に渡されることを確認できます。人

が作成されました。

#非プロパティ属性

非プロパティ属性がコンポーネントに渡されます、ただし、コンポーネントには、対応するプロップによって定義された特性がありません。 ただし、明示的に定義された props はサブコンポーネントに情報を渡すのに適しているため、コンポーネント ライブラリの作成者は、コンポーネントがどのようなシナリオで使用されるかを常に予測できるわけではありません。このため、コンポーネントは任意の属性を受け入れることができ、これらの属性はコンポーネントのルート要素に追加されます。 たとえば、サードパーティの

<input> を必要とするブートストラップ プラグインを介して、サードパーティの

---

<bootstrap-date-input>

コンポーネントを使用するとします。 ;

は

data-date-picker

機能を使用します。この属性をコンポーネント インスタンスに追加できます:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

これにより、この data-date-picker="activated" 属性がルート上の 。

既存の機能を置き換え/マージ

Imagine

<bootstrap-date -input> テンプレートは次のとおりです:

<input type="date" class="form-control">

日付ピッカー プラグインのテーマをカスタマイズするには、次のような特別なクラス名を追加する必要がある場合があります:

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

この場合、2 つの異なる class の値を定義します。 :

• #form-control、コンポーネントのテンプレートに設定されます

• date-picker-theme-dark、コンポーネントの親から渡されます

ほとんどの機能では、外部から提供されます。コンポーネントの値は、コンポーネント内で内部的に設定される値。したがって、

type="text" が渡されると、type="date" は置き換えられて破棄されます。幸いなことに、class 属性と style 属性はもう少し賢いものです。つまり、両側の値が結合されて最終値が得られます: form-control date-picker-テーマ-ダーク。

属性継承を無効にする

ルートが必要ない場合

コンポーネントの要素 属性を継承するには、コンポーネントのオプションで inheritAttrs: false を設定できます。例:

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

これは、コンポーネントに渡される属性名と属性値を含む、インスタンスの

$attrs

属性での使用に特に適しています。例:

{
  required: true,
  placeholder: 'Enter your username'
}

has

inheritAttrs: false

および $attrs を使用すると、これらの属性をどの要素に割り当てるかを手動で決定できます。 基本コンポーネント:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

注:

inheritAttrs: false

オプション は # バインディングには影響しません style と class。 このモードでは、どの要素が実際のルート要素であるかを気にすることなく、基本コンポーネントを生の HTML 要素のように使用できます:

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>