Vueにおける単一方向のデータフロー

すべてのpropsは、子プロパティと親プロパティの間の一方向のバインディングを形成します：親プロパティが更新されると、それは子に流れますが、その逆はありません。これにより、子コンポーネントが親の状態を誤って変更してしまうのを防ぎ、アプリケーションのデータフローを理解しにくくすることを回避できます。

さらに、親コンポーネントが更新されるたびに、子コンポーネントのすべてのpropsは最新の値で更新されます。これは、子コンポーネント内でpropを変更しようとすべきではない ことを意味します。もしそうすると、Vueはコンソールに警告を表示します。

propを変更したくなる誘惑にかられる一般的なケースは2つあります。それらを見ていきましょう。

ケース1

propは初期値を渡すために使用され、子コンポーネントはその後、それをローカルのデータプロパティとして使用したい場合です。この場合、propの値を初期値として使用するローカルデータプロパティを定義することが最善です：

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

ケース2

propは変換が必要な生の値として渡される場合です。この場合、propを使用した算出プロパティを定義することが最善です：

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

注意点

JavaScriptではオブジェクトと配列は参照によって渡されるため、もしpropが配列またはオブジェクトの場合、子コンポーネント内でのそのオブジェクトや配列の変更は親の状態に影響を与え、 Vueはこれについて警告することができません。 propの変更は避けるべきです。オブジェクトや配列も同様です。なぜなら、一方向のデータバインディングを無視すると、望ましくない結果を招く可能性があるからです。