vue+props を使用してプロジェクトにデータを渡す方法

今回は、vue+propsを使用してプロジェクト内のデータを転送する方法と、vue+propsを使用してデータを転送する際の注意点について説明します。以下は実践的なケースですので、見てみましょう。

Vue では、親コンポーネントと子コンポーネントの関係は、props が下方に渡され、イベントが上方に渡されるとして要約できます。親コンポーネントは props を通じて子コンポーネントにデータを送信し、子コンポーネントはイベントを通じて親コンポーネントにメッセージを送信します。それらがどのように機能するかをご覧ください。

1. 基本的な使用法

コンポーネントはテンプレートのコンテンツを再利用する必要があるだけでなく、より重要なことに、コンポーネント間で通信する必要があります。

コンポーネントでは、オプション props を使用して、親から受け取る必要があるデータを宣言します。props の値は 2 種類あり、1 つは文字列配列、もう 1 つはオブジェクトです。

1.1 文字列配列:

  <p id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </p>
Vue.component('my-component4',{
 props: ['message'],
 template: '<p>{{message}}</p>'
});
var app4 = new Vue({
 el: '#app4'
});

レンダリングされた結果は次のとおりです:

<p id= ” app4”>
　　<p ＞来自父组件的数据＜／ p>
</p>

props で宣言されたデータとコンポーネント データ関数によって返されるデータの主な違いは、props は親から取得されるのに対し、コンポーネントのデータは親から取得されることです。データはコンポーネント自体です。データのスコープはコンポーネント自体です。どちらのデータも、テンプレート、計算されたプロパティ、およびメソッドで使用できます。

上記の例のデータ メッセージは、props を介して親から渡されます。複数のデータを渡したい場合は、props 配列に項目を追加するだけです。

渡されるデータは直接ハードコーディングされていない場合がありますが、この場合、親コンポーネントのデータが変更されたときに v -bind コマンドを使用して props の値を動的にバインドできます。子コンポーネントにも渡されます。

  <p id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </p>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<p>{{myText}}</p>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});

いくつかの注意点:

1. v-bind を使用せず、数値、ブール値、配列、オブジェクトを直接渡す場合は、文字列のみが渡されます。

2. オブジェクトのすべてのプロパティを props として渡したい場合は、パラメーターなしで v-bind を使用できます (つまり、v-bind:prop-name の代わりに v-bind を使用します)。たとえば、既知の todo オブジェクト:

1.2 オブジェクト:

prop を検証する必要がある場合、オブジェクトの書き込みが必要です。

通常、コンポーネントを他の人が使用できるように提供する必要がある場合は、データ検証を実行することをお勧めします。たとえば、文字列が渡されると、警告が表示されます。コンソール。

 <p id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </p>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必须是数字类型的
   required: true, //必须传值
   default: 1 //如果未定义，默认值就是1
  }
 },
 template: '<p>{{myText}}</p>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

検証された型 type は次のとおりです:

• String
• Number
• Boolean
• Object
• Array
• Function

type は、instanceof 検出を使用してカスタム コンストラクターにすることもできます。

プロパティの検証が失敗すると、開発バージョンではコンソールに警告がスローされます。

2. 一方向のデータ フロー

Vue 2.x と Vue l.x の大きな変更点は、Vue2.x が props を介して一方向にデータを転送することです。つまり、親コンポーネントのデータが変更されると、データが転送されます。子コンポーネントに転送されますが、その逆は行われません。

ビジネスでは、prop を変更する必要がある 2 つの状況によく遭遇します

2.1: 1 つは、親コンポーネントが初期値を渡し、子コンポーネントがそれを使用および変更できる初期値として保存することです。独自の範囲内で自由に。 (Prop が初期値として渡された後、サブコンポーネントはそれをローカル データとして使用したいと考えます。)

この場合、コンポーネント データ内で別のデータを宣言し、親コンポーネントの prop を参照できます。コードは次のとおりです:

 <p id="app7">
   <my-component7 :init-count="1"></my-component7>
  </p>
Vue.component('my-component7',{
 props: ['initCount'],
 template: '<p>{{count}}</p>',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});

データのカウントはコンポーネントの初期化時に親コンポーネントから取得されます。その後はカウントを維持するだけです。これにより、initCount を直接操作する必要がなくなります。

2.2 prop は、変換する必要がある元の値として渡されます。 (Prop は生データとして渡され、サブコンポーネントによって他のデータ出力に処理されます。)

この場合、計算されたプロパティは次のとおりです:

  <p id="app8">
   <my-component8 :width="100"></my-component8>
  </p>
Vue.component('my-component8',{
 props: ['width'],
 template: '<p :style="style">组件内容</p>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});

JavaScript ではオブジェクトと配列が使用されることに注意してください。 prop がオブジェクトまたは配列の場合、子コンポーネント内でそれを変更すると、親コンポーネントの状態に影響します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue のパッケージ化最適化方法とは何ですか

ダブルクリックとクリック イベント間の競合を解決する

以上がvue+props を使用してプロジェクトにデータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。