はじめに: 実際の作業では、データが子コンポーネントで処理され、データの変更を親コンポーネントで同期的に取得する必要があるシナリオが多くあります。たとえば、クエリ ページには多くのクエリ条件があります。領域のコンポーネントを選択するサブコンポーネントがあるとします。領域を選択した後、すぐにクエリ操作を実行する必要があります。このとき、親との間でデータを同期する必要があります。そして子コンポーネント。
1. サブコンポーネントの定義と導入
サブコンポーネントの定義にはグローバル登録とローカル登録の2つの方法がありますが、私の実際の業務では基本的にローカル登録でサブコンポーネントをファイルとして定義しています 親コンポーネントがサブコンポーネントを導入し、親コンポーネントにサブコンポーネントを登録.vueしimportますcomponents
import AreasSelector from '@/components/AreasSelector/index';
...
components: {
AreasSelector
},
親コンポーネント内でサブコンポーネントを使用する場合は、それぞれのビジネス シナリオに基づいて、サブコンポーネントが受け入れることができるパラメータと返すべきパラメータを設計する必要があります。
ここで、子コンポーネントは親コンポーネントから渡される 2 つのパラメータを受け取ることができます: 1 つは親areaIdsコンポーネントで選択された領域ids、もう 1 つはisMulti領域が複数の選択をサポートするかどうかです。親コンポーネントから子コンポーネントにデータを渡すときに使用する必要がありますprops。静的なデータ (文字列、数値など) を渡す場合は追加する必要はありません。:動的データ (データ) を渡したい場合は、追加する必要はありません。現在のコンポーネント インスタンスから取得する必要がある) を追加する必要があります:。
サブコンポーネントによって返されるパラメータは、ユーザーが動作をクリックした後に選択されたパラメータですareaIds。サブコンポーネントから返されたパラメータを受け取るには、サブコンポーネントが使用される$onコールバック関数を定義する必要があります。これは、
親コンポーネントのオブザーバーに相当します。
<AreasSelector :props="{areaIds,isMulti:true}" @area-change="onAreaChange"></AreasSelector>
サブコンポーネントでデータを送信する必要がある場合は、サブコンポーネントのパブリッシャー$emitに相当する Send Data を使用します。
this.$emit('area-change', newVal);
$onそして、$emitオブザーバー モードが使用されます。つまり、定義されている$emitすべてのコールバック関数を見つけて、すべてのコールバック関数を実行する必要があります$on。ソース コードを見るだけで済みますvue。最も重要な部分だけを残しておきました。
Vue.prototype.$emit = function (event) {
var vm = this;
// cbs中存储着$on定义的回调函数列表
var cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
var info = "event handler for \"" + event + "\"";
for (var i = 0, l = cbs.length; i < l; i++) {
// 到这个函数中执行回调函数
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
return vm
};
二、watch
子コンポーネント内では、ユーザーが領域をクリックすると一連の処理が必要となり、その処理が領域配列に変換されてid親コンポーネントに渡されます。親コンポーネントに渡すプロセスを手動で呼び出すことも$emit、watchデータの変更を監視するためにそのままにしてwatch内部で呼び出すこともできます$emit。
ウォッチ公式ドキュメント
watchは、vueコンポーネントが設定できる属性オブジェクトでありdata、vueコンポーネント内のデータの変化を監視keyするために使用されます。監視するデータのvalue定義形式は次の 3 つがあります:
① コールバック関数のメソッド名, 文字列
② オブジェクトで、handler属性はコールバック関数メソッドです。deep属性trueが の、監視対象オブジェクトの深い属性が変化したときにもコールバック関数がトリガーされることを意味し、属性が に設定されている場合はimmediate、コールバック関数がトリガーされることを意味します。 ③ コールバック関数の配列、それらは順番に実行されます。親コンポーネントに渡す必要があるデータを定義し、その変更をリアルタイムで監視し、自動的に呼び出します。truewatcher$emit
watch: {
'areaData': {
handler(newVal, oldVal) {
if (!newVal) return;
this.$emit('area-change', newVal);
},
deep: true,
immediate: true
}
},