今回は、Vue の親子コンポーネントのデータ転送、変更、更新方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。
親コンポーネントと子コンポーネントのデータ関係、以下の4種類に分けて説明します:
親コンポーネントが子コンポーネントのデータを変更し、リアルタイムに更新する
子コンポーネントコンポーネントは、$emit を通じて子コンポーネントにデータを渡します。this.$data は、現在のコンポーネントのデータ (return{...}) 内のすべてのデータを参照します。
this.$emit('data',this.$data);
その後、親コンポーネントの getinputdata メソッドを通じてデータが受信されます。
@data='getinputdata'
データは渡されたデータです。このデータを変更することで、親コンポーネントを通じて子コンポーネントをリアルタイムで更新できます
getinputdata(data) { console.log(data); data.background = { backgroundColor: 'yellow', border: 'none' }; }
子コンポーネントは親コンポーネントのデータを変更します
親のデータコンポーネントは子コンポーネントでは変更できません。親コンポーネントのデータを変更する場合は、上記の $emit メソッドを使用する必要があります。
vue 公式 Web サイトでカスタム イベントを参照できます: https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9% 89%E4% BA%8B%E4%BB%B6
子コンポーネントは親コンポーネントのデータを取得し、変更しますが、リアルタイムでは更新しません
1 子コンポーネントは、渡されたデータを受け取ります。 props を介して親コンポーネントにアクセスし、props の値を var で変数を let または宣言してから使用するように割り当てます。
let test = this.testoutdata; test++; console.log(test); console.log('test:'+this.testoutdata);
2. 子コンポーネントは、親コンポーネントから props を通じて渡されたデータを取得し、その props の値を data(return{...}) の変数に代入し、この変数を使用します。
this.outtest++; console.log(this.outtest); console.log('test:'+this.testoutdata);
vue 公式 Web サイトでカスタム イベントを参照できます: https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95 %B0%E6 %8D%AE%E6%B5%81
親コンポーネントは子コンポーネントのデータを取得して変更しますが、リアルタイムでは更新しません
ここでのメソッドは「サブコンポーネントは親コンポーネントのデータを取得し、変更しますが、リアルタイムでは更新しません。メソッドは同じで、値の受け渡し方法が異なるだけです。子コンポーネントは、$emit を通じて値を親コンポーネントに渡します。
上記は私があなたのためにまとめたものです。
関連記事:
Vue.jsのカスタムイベントフォーム入力コンポーネントメソッド
vue.jsの配列位置移動とビューの更新を同時に行うメソッド
vue.jsまたはjsで実装するメソッド中国語の A-Z 並べ替え
以上がVue で親子コンポーネントのデータ転送、変更、更新を実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。