vue.js コンポーネント間でデータを渡す方法

前書き

コンポーネントは vue.js の最も強力な機能の 1 つであり、コンポーネント インスタンスのスコープは互いに独立しています。つまり、異なるコンポーネント間のデータは相互に参照できません。データをどのように転送するかもコンポーネントの重要な知識ポイントの 1 つになります。

コンポーネント

コンポーネント間にはさまざまな関係もあります。父と子と兄弟の関係（父と子ではないものを仮に兄弟と呼ぶ）。

原著者: Lin Xin、著者ブログ:

親子コンポーネント

親子関係とは、コンポーネント A がテンプレート内でコンポーネント B を使用し、コンポーネント A が親コンポーネント、コンポーネント B が子コンポーネントであることを意味します。

// 注册一个子组件Vue.component('child', {data: function(){text: '我是father的子组件！'}template: '{{ text }}'})// 注册一个父组件Vue.component('father', {template: '
' // 在模板中使用了child组件})

父親コンポーネントを直接使用する場合:

ページはレンダリングされます: 私は父親の子コンポーネントです!

親コンポーネントはテンプレート内の子コンポーネントを使用しているので親コンポーネントであり、子コンポーネントが使用されているので子コンポーネントは子コンポーネントです。

兄弟コンポーネント

2 つのコンポーネントが相互に参照していない場合、それらは兄弟コンポーネントです。

Vue.component('brother1', {template: '
我是大哥
'})Vue.component('brother2', {template: '
我是小弟
'})

コンポーネントを使用する場合:

ページは次のようにレンダリングされます:

私は兄です

私は弟です

Prop

子コンポーネントが親のデータを使用したい場合コンポーネントを渡す必要があります。子コンポーネントの props オプションを使用して、親コンポーネントによって渡されたデータを取得します。以下では、.vue ファイルの形式を使用して例を記述します。

データの受け渡し方法

親コンポーネントfather.vue内で子コンポーネントchild.vueを参照し、nameの値を子コンポーネントに渡します。

子コンポーネント child.vue の props オプションで取得するデータを宣言します

その後、ページがレンダリングされます: Hello linxin

一方向データ フロー

親コンポーネント 変更が発生すると、子コンポーネントのビューが自動的に更新されます。ただし、子コンポーネントでは props を変更したくありません。これらのデータを変更する必要がある場合は、次の方法を使用できます:

方法 1: prop をローカル変数に割り当て、必要に応じて prop に影響を与えずにローカル変数を変更します

export default {data(){newMessage: null },props: ['message'],created(){this.newMessage = this.message;}}

方法 2:計算されたプロパティのプロセス props

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

カスタム イベント

prop は一方向のバインドです。親コンポーネントのプロパティが変更されると、それは子コンポーネントに送信されますが、その逆は行われません。子コンポーネントの prop 値を変更しても、ビューを更新するために親コンポーネントに戻されることはありません。では、子コンポーネントはどのようにして親コンポーネントと通信するのでしょうか?

それはカスタムイベントです。親コンポーネント $on(eventName) でカスタム イベントをリッスンすることにより、子コンポーネントの $emit(eventName) がカスタム イベントをトリガーすると、親コンポーネントは対応する操作を実行します。

たとえば、親コンポーネントでポップアップ サブコンポーネントの表示を制御する場合、サブコンポーネントで閉じるを押した後、それを非表示にするように親コンポーネントに指示すると、親コンポーネントは次の操作を実行します。ポップアップボックスを非表示にします。

子コンポーネントのdialog.vue内:

これにより、親コンポーネントと子コンポーネント間の相互通信が実現されます。

Vuex

上記の例はすべて親子関係のコンポーネントに基づいていますが、他のレベルの関係では実装がより面倒になります。そうすれば、Vuex はさまざまなコンポーネント間のリアルタイム通信をより適切にサポートできるようになります。 Vuex については、私の他の記事をご覧ください: Vuex は To-Do アイテムのステータス管理をモジュール化します

概要

コンポーネント通信は、一部の単純なデータ転送については、必ずしも Vuex を使用する必要はありません。この記事では、コンポーネントのパラメータの受け渡しに関する基本的な知識を主に記録します。実際の実践では、prop を使用してサブコンポーネントの表示と非表示を行ったり、vuex を使用してコンポーネント間のデータ状態管理を実装したりすることができます。

以上がvue.js コンポーネント間でデータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。