vuejs で prop は何を意味しますか

vuejs では、prop はデータを渡すために親コンポーネントによって使用されるカスタム プロパティです。サブコンポーネントは、props オプションを使用して「prop」を明示的に宣言する必要があります。文字列以外のテンプレートを使用する場合、prop 名の形式はキャメルケースからケバブケース (ダッシュ区切り) に変換されます。

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

1. Prop を使用してデータを渡す

コンポーネント インスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照できないし、参照すべきではないことを意味します。 props を使用してデータを子コンポーネントに渡すことができます。
prop は、データを渡すために親コンポーネントによって使用されるカスタム プロパティです。子コンポーネントは、props オプション

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

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

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

結果:

hello!

2. キャメルケースとケバブケース

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

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

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

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

3. 動的プロパティ

は、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 数値を渡したい場合は、v-bind を使用して、その値が JavaScript 式

5 として評価されるようにする必要があります。 Flow

prop は単一バインドです。親コンポーネントのプロパティが変更されると、それは子コンポーネントに送信されますが、その逆は行われません。これは、子コンポーネントが親コンポーネントの状態を不注意に変更することを防ぐためです。これにより、アプリケーションのデータ フローが理解しにくくなります。同時に、これも理解しやすいです。親コンポーネントはサブコンポーネントの高レベルの抽象化であり、サブコンポーネントの共通部分を表します。1 つのコンポーネントのデータが変更されても、その抽象化は変わりません。ただし、その抽象化の変更は、すべてのサブコンポーネントの変更を表します。
さらに、グループが徐々に更新されるたびに、サブコンポーネントのすべてのプロパティが最新の値に更新されます。これは、子コンポーネント内の props を変更すべきではないことを意味します。これを行うと、Vue はコンソールに警告を表示します。
プロップの変更には通常 2 つのケースがあります:

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

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

より正確には、これら 2 つの状況は次のとおりです:
a. ローカル データ属性を定義し、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

* 数値

* ブール値

* 関数

* オブジェクト

* 配列

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

関連する推奨事項: 「vue.js チュートリアル 」

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