vue コンポーネントを操作し、props を使用してデータを渡す方法-jsチュートリアル-php.cn

vue コンポーネントを操作し、props を使用してデータを渡す方法

php中世界最好的语言

リリース： 2018-05-25 15:30:55

オリジナル

1461 人が閲覧しました

今回はvueコンポーネントを操作する際にpropsを使ってデータを転送する方法を紹介します。vueコンポーネントを操作する際の注意点と実際のケースを見てみましょう。

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
 }
});

ログイン後にコピー

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

• 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中文网其它相关文章！