オブジェクトを渡すvueコンポーネントに一方向バインディングを実装するにはどうすればよいですか?

ここで、Vue コンポーネントによって渡されるオブジェクトに一方向バインディングを実装する例を共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。

vue コンポーネントを使用する場合、コンポーネント間でデータを渡す必要があることがよくあります。文字列変数や数値変数を渡す状況についてはここでは説明しません。オブジェクトを渡すときに発生した問題は、公式ドキュメントを読むだけで十分です。コンポーネント間の落とし穴。

オブジェクトがコンポーネント間で受け渡されるとき、このオブジェクトの参照型はアドレスを指しているため、子コンポーネントでオブジェクトの特定の属性値が変更されると、親コンポーネントのオブジェクトの対応する属性も変更されます。したがって、このような双方向バインディングが必要な場合は、これも良い方法です。ただし、そのような双方向バインディングが必要ない場合は、プロパティと値をコピーするために新しいオブジェクトを定義する必要があります。通常の var または let オブジェクトを使用する場合、ここに落とし穴があります。たとえば、

computed: { 
  data: function () { 
   let obj={}; 
   obj=this.message//this.message是父组件传递的对象 
   return obj 
 } 
 },

データ内の各属性をそれぞれ入力ボックスにバインドして、それを変更しようとすると、次のことがわかります。親コンポーネントの対応する属性値は引き続き変更され、一方向バインディングの効果を実現するには、メソッドを追加する必要があります

computed: { 
 data: function () { 
  let obj=Object.assign({}, this.message); 
  return obj 
 } 
 },

この方法で返されるデータは新しいオブジェクトであり、変更されません。元のオブジェクトのアドレスを指していないため、それを変更しても親コンポーネントは変更されません。

上記は私があなたのためにまとめたものです。

関連記事:

JS匿名関数と匿名自己実行関数の概念と使い方の分析

npm管理者としてインストールする際の権限の問題を解決する

vue-router関連の基礎知識と動作原理

以上がオブジェクトを渡すvueコンポーネントに一方向バインディングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。