Vue では、異なるコンポーネント間でデータを渡す必要があることがよくあります。これらのコンポーネントは、親子コンポーネント、兄弟コンポーネント、または任意のレベルのコンポーネントにすることができます。 Vue は、Prop、Event Bus、Vuex など、この問題を解決するさまざまな方法を提供します。この記事では、コンポーネント間でデータを渡す Vue のメソッドの 1 つである 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
