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

亚连
リリース: 2018-06-02 17:12:21
オリジナル
1785 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート