Vue で親子コンポーネントのデータ転送、変更、更新を実装する方法 (詳細なチュートリアル)

今回は、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 サイトの他の関連記事を参照してください。