Vueで複数のパラメータを渡す方法

Vue は、Web アプリケーションとユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、コンポーネントのレンダリング、メソッドの呼び出しなど、さまざまな操作を実行するためにパラメーターを渡す必要があることがよくあります。この記事では、Vueで複数のパラメータを渡す方法を紹介します。

Vue では、Props を通じてサブコンポーネントにパラメータを渡すことができます。小道具はコンポーネント間で通信する方法です。次に例を示します。

< script>
import ChildComponent from './ChildComponent.vue';

export デフォルト {
コンポーネント: {

ChildComponent

},
data() {

return {
  value1: 'some value',
  value2: 123
}

}
}

この例では、value1 と value2 という 2 つの値を持つ親コンポーネントがあります。これらの値を Props として ChildComponent に渡したいと考えています。複数のパラメータを渡すには、コロン (:) を使用して各パラメータをコンポーネントのプロパティにバインドします。

ただし、複数のパラメータを渡したい場合、Props を渡すには各パラメータを手動でバインドする必要があり、面倒な場合があります。幸いなことに、Vue は複数のパラメーターを渡す別の方法、つまりオブジェクトを介してパラメーターを渡す方法を提供します。

<テンプレート>

<child-component v-bind="props"></child-component>

<スクリプト>
ChildComponent を './ChildComponent.vue' からインポート;

デフォルトのエクスポート {
コンポーネント: {

ChildComponent

},
data() {

return {
  props: {
    prop1: 'some value',
    prop2: 123
  }
}

}
}

この例では、v-bind ディレクティブを使用して、props オブジェクトを ChildComponent コンポーネントに渡します。この利点は、各パラメータを手動でバインドするのではなく、複数のパラメータを渡すために 1 つのオブジェクトを維持するだけで済むことです。また、ChildComponent コンポーネントを変更せずに、親コンポーネントでこれらのパラメーターを簡単に変更できます。

Props に加えて、Vue はデータを渡すためのイベント メカニズムも提供します。 $emit メソッドを使用して、子コンポーネントでイベントをトリガーし、親コンポーネントでイベントをリッスンしてデータを受信できます。

<テンプレート>

<button @click="sendData">Send Data to Parent</button>

<スクリプト>
デフォルトのエクスポート {
メソッド: {

sendData() {
  this.$emit('send-data', {
    prop1: 'some value',
    prop2: 123
  });
}

}
}

この例では、子コンポーネントでデータ送信イベントをトリガーします。を作成し、データ オブジェクトを親コンポーネントに渡します。親コンポーネントでは、v-on ディレクティブを通じてイベントをリッスンし、コールバック関数でデータ オブジェクトを受け取ることができます。

<テンプレート>

<child-component @send-data="handleData"></child-component>

<スクリプト>
ChildComponent を './ChildComponent.vue' からインポート;

デフォルトのエクスポート {
コンポーネント: {

ChildComponent

},
メソッド: {

handleData(data) {
  console.log(data.prop1);
  console.log(data.prop2);
}

}
}

つまり、Vue で複数のパラメータを渡す方法は複雑ではありません。Props とオブジェクトを使用してパラメータを渡すか、$emit を使用してパラメータを渡すことができます。子コンポーネントと親コンポーネント、トリガーイベントとリスニングイベントの間。どの方法を選択するかは特定のニーズによって異なりますが、これらは Vue の非常に便利な機能です。

以上がVueで複数のパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。