props を介してデータを渡す手順の詳細な説明

今回は、props を介してデータを送信する手順について詳しく説明します。props がデータを送信する際の 注意事項 は何ですか?実際のケースを見てみましょう。

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

1. 基本的な使用法

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

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

string

配列、もう 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中文网其它相关文章！

推荐阅读：

webpack自动刷新使用详解

Angular入口组件与声明式组件使用详解

以上がprops を介してデータを渡す手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。