Vue はコンポーネント間でデータをどのように転送しますか? Prop メソッドの簡単な分析

Vue では、異なるコンポーネント間でデータを渡す必要があることがよくあります。これらのコンポーネントは、親子コンポーネント、兄弟コンポーネント、または任意のレベルのコンポーネントにすることができます。 Vue は、Prop、Event Bus、Vuex など、この問題を解決するさまざまな方法を提供します。この記事では、コンポーネント間でデータを渡す Vue のメソッドの 1 つである Prop を紹介します。

Prop

Prop は、親コンポーネントが子コンポーネントにデータを渡す方法です。 Vue では、Props オプションを使用して、データを受信するサブコンポーネントのプロパティを定義できます。これらのプロパティには、文字列、数値、オブジェクト、配列などの任意の JavaScript タイプを使用できます。親コンポーネントでは、v-bind ディレクティブを使用して、JavaScript 式を子コンポーネントの props 属性にバインドできます。

Props を使用してデータを渡す方法を理解するための例を見てみましょう。親コンポーネント Parent と子コンポーネント Child があると仮定すると、親は子コンポーネントに名前を渡す必要があります。サブコンポーネントは次の方法で定義できます。

Vue.component('child', {
  // 声明 props
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

このサブコンポーネントでは、親コンポーネントからデータを受け取るために使用される name という props 属性を宣言します。子コンポーネントのテンプレートでは、このデータを {{ name }} を通じて出力できます。

次に、親コンポーネント内でこの子コンポーネントを参照し、データを渡します。

<child name="Tom"></child>

この例では、v-bind ディレクティブを使用して、Tom Bind という名前の JavaScript 式を子コンポーネントの props 属性。子コンポーネントはこのデータを受け取り、Tom を出力します。

もちろん、親コンポーネントのデータを使用して値を渡すこともできます。例:

<child :name="msg"></child>

この例では、親コンポーネントの msg 属性の値を子コンポーネントの name 属性に渡します。

さらに、v-bind 命令の省略構文を使用してデータを渡すこともできます。

<child :name="msg"></child>

ここでのコロン (:) は、v-bind 命令と同等です。

概要

Vue では、Prop を使用してコンポーネント間でデータを渡すことができます。このプロセスでは、サブコンポーネントの props 属性を定義し、v-bind ディレクティブを使用して JavaScript 式をサブコンポーネントの props 属性にバインドする必要があります。このようにして、子コンポーネントはデータを受信して​​使用できます。

以上がVue はコンポーネント間でデータをどのように転送しますか? Prop メソッドの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。