vuejs プロップの使用法は何ですか

vuejs prop の使用法: 1. "5dd6a6016ce03523c416f680867a38747d4dd9c7239aac360e401efe89cbb393"; などのステートメントで Prop を使用してデータを転送します。 2. v-bind を使用して動的にデータを転送します。 props の値を親コンポーネントのデータなどにバインドします。

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vuejs Prop の基本的な使用法

1. Prop を使用してデータを転送します

コンポーネント インスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照できないし、参照すべきではないことを意味します。 props を使用してデータを子コンポーネントに渡すことができます。

prop は、データを渡すために親コンポーネントによって使用されるカスタム プロパティです。サブコンポーネントは、props オプション

Vue.component('child',{
    props:['message'],
    template:&#39;<span>{{ message }}</span>&#39;
})

を使用して「prop」を明示的に宣言し、通常の文字列を渡す必要があります:

<child message="hello!"></child>

結果:

hello!

2. キャメルケースと .kebab -case

html では大文字と小文字が区別されません。非文字列テンプレートを使用する場合、プロップ名の形式はキャメルケースからケバブケースに変換されます (ダッシュで区切られます):

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:&#39;<span>{{ message }}</span>&#39;
})

//kebab-case
<child my-message="hello!"></child>

繰り返しますが、文字列テンプレートを使用している場合は、これらの制限について心配する必要はありません。 。

3. 動的 Prop

v-bind を使用して HTML 機能を式にバインドするのと同様に、v-bind を使用して props の値を親のデータに動的にバインドすることもできます。成分。親コンポーネントのデータが変更されると、その変更は子コンポーネントにも反映されます。

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

v-bind の短縮構文を使用する方が通常は簡単です。

<child :my-message="parrentMsg"></child>

4. リテラル構文と動的構文

リテラル prop であるため、値は次で始まります。実際の数値の代わりに文字列「1」が渡されます。実際の JavaScript 数値を渡したい場合は、その値が JavaScript 式として評価されるように v-bind を使用する必要があります:

5. 単一項目のデータ フロー

prop は単一項目バインディング : 親コンポーネントのプロパティが変更されると、変更は子コンポーネントに送信されますが、その逆は行われません。これは、子コンポーネントが親コンポーネントの状態を不注意に変更することを防ぐためです。これにより、アプリケーションのデータ フローが理解しにくくなります。同時に、これも理解しやすいです。親コンポーネントはサブコンポーネントの高レベルの抽象化であり、サブコンポーネントの共通部分を表します。1 つのコンポーネントのデータが変更されても、その抽象化は変わりません。ただし、その抽象化の変更は、すべてのサブコンポーネントの変更を表します。

さらに、グループが徐々に更新されるたびに、サブコンポーネントのすべてのプロパティが最新の値に更新されます。これは、子コンポーネント内の props を変更すべきではないことを意味します。これを行うと、Vue はコンソールに警告を表示します。

通常、プロップを変更するケースは 2 つあります。

1.prop が初期値として渡され、サブコンポーネントはその初期値をローカル データの初期値としてのみ使用します。

2.prop は、変換する必要がある元の値として渡されます。

より正確には、これら 2 つの状況は次のとおりです:

a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。
“`
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter}
}
    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

6. プロパティの検証

コンポーネントはプロパティの検証要件を指定できます。検証要件が指定されていない場合、Vue は警告を発行します。これは、コンポーネントを他の人が利用できるようにする場合に便利です。

prop が文字列の配列ではなくオブジェクトである場合、検証要件が含まれます:

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    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 value > 10
      }
    }
  }
})

type には次のネイティブ コンストラクターを指定できます:

* String

* Number

* Boolean

* Function

* Object

* Array

type はカスタム構造体にすることもできます Device 、instanceof検出を使用します。開発バージョンを使用している場合、プロパティの検証が失敗すると、警告がスローされます。

推奨: 「最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvuejs プロップの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。