記事ディレクトリ
序文
findComponents組み込みではなく自ら実装する必要がありVue.js、ツールの機能として利用する一連のメソッドであり、コンポーネント通信の究極のソリューションとも言える一連の機能です。findComponents一連のメソッドは最終的にコンポーネントのインスタンスを返し、コンポーネントのデータとメソッドを読み取ったり呼び出したりできるようになります。
該当シーン
- コンポーネントから、上方向に最も近い指定されたコンポーネントを検索します。
- コンポーネントから、指定されたすべてのコンポーネントを上方向に検索します。
- コンポーネントから、最も近い指定されたコンポーネントを下位に検索します。
- コンポーネントから、指定されたすべてのコンポーネントを検索します。
- コンポーネントから、指定されたコンポーネントの兄弟コンポーネントを検索します。
5異なるシーンは5異なる機能に対応し、実装原理は同様です。
達成
5各関数の原理は、再帰と走査を通じて、指定されたコンポーネントの name オプションに一致するコンポーネント インスタンスを検索して返すことです。
ツール機能を配置するディレクトリsrcの下に新しいフォルダを作成しutils、新しいファイルを作成しますassist.js。このセクションのすべての機能はこのファイル内で完了し、各機能はexportを通じて外部に提供されます。
指定された上に最も近いコンポーネントを検索します - findComponentUpward
コードは以下のように表示されます:
// assist.js
// 由一个组件，向上找到最近的指定组件
function findComponentUpward (context, componentName) {
let parent = context.$parent;
let name = parent.$options.name;
while (parent && (!name || [componentName].indexOf(name) < 0)) {
parent = parent.$parent;
if (parent) name = parent.$options.name;
}
return parent;
}
export {
findComponentUpward };
findComponentUpward2 つのパラメータを受け取ります。最初のパラメータは、どのコンポーネントに基づいて検索するかなどの現在のコンテキストで、通常は現在のコンポーネントに基づいています。つまり、 に渡されます。2 番目のパラメータは、検索したいコンポーネントthisですname。
findComponentUpwardこのメソッドは、コンポーネント (すなわち)がに渡されたものと一致するかどうかを判断することにより、最も近いコンポーネントまで継続的にステートメント内のwhile現在のオブジェクトを上書きします。parentparentnamecomponentName
違いは、イベントを通じてコンポーネントに通知するのではなく、コンポーネントのインスタンスが直接取得されることですdispatch。findComponentUpward
findComponentUpward最も近いコンポーネント インスタンスのみが検索されます。要件を満たすすべてのコンポーネントを検索したい場合は、次の方法を使用する必要があります。
指定されたすべてのコンポーネントを上方向に検索します - findComponentsUpward
コードは以下のように表示されます:
// assist.js
// 由一个组件，向上找到所有的指定组件
function findComponentsUpward (context, componentName) {
let parents = [];
const parent = context.$parent;
if (parent) {
if (parent.$options.name === componentName) parents.push(parent);
return parents.concat(findComponentsUpward(parent, componentName));
} else {
return [];
}
}
export {
findComponentsUpward };
違いは、見つかったすべてのコンポーネント インスタンスを含む配列を返すことfindComponentUpwardです。findComponentsUpward（注意函数名称中多了一个“s”）
findComponentsUpward使用シナリオはほとんどありませんが、この関数は常に親 ( parent) を検索し、再帰コンポーネントの親のみがそれ自体であるため、通常は再帰コンポーネントでのみ使用されます。実際、iViewこのメソッドは、メニュー コンポーネントなどの再帰コンポーネント シナリオでも使用されますMenu。再帰コンポーネントはVue.jsコンポーネント内ではあまり使われないので、当然findComponentsUpward一般的には使われません。
最も近い指定されたコンポーネントを下に検索します - findComponentDownward
コードは以下のように表示されます:
// assist.js
// 由一个组件，向下找到最近的指定组件
function findComponentDownward (context, componentName) {
const childrens = context.$children;
let children = null;
if (childrens.length) {
for (const child of childrens) {
const name = child.$options.name;
if (name === componentName) {
children = child;
break;
} else {
children = findComponentDownward(child, componentName);
if (children) break;
}
}
}
return children;
}
export {
findComponentDownward };
context.$children取得するものは、現在のコンポーネントのすべてのサブコンポーネントなので、一致するコンポーネントがあるかどうかを確認するためにそれを走査する必要があります。一致nameしない場合は、children的children最も近いコンポーネントが見つかるまで再帰的に各コンポーネントを検索し続けます。
指定されたすべてのコンポーネントを下に検索します - findComponentsDownward
指定したコンポーネントをすべて検索したい場合は、findComponentsDownward関数を使用します。
コードは以下のように表示されます:
// assist.js
// 由一个组件，向下找到所有指定的组件
function findComponentsDownward (context, componentName) {
return context.$children.reduce((components, child) => {
if (child.$options.name === componentName) components.push(child);
const foundChilds = findComponentsDownward(child, componentName);
return components.concat(foundChilds);
}, []);
}
export {
findComponentsDownward };
この関数の実装方法はいろいろありますが、ここではreduceアキュムレータとしてうまく利用したり、再帰を使って見つかった要素を配列に結合して返したりしていますが、コード量は少ないですが、少しわかりにくいです。
指定されたコンポーネントの兄弟コンポーネントを検索します - findBrothersComponents
コードは以下のように表示されます:
// assist.js
// 由一个组件，找到指定组件的兄弟组件
function findBrothersComponents (context, componentName, exceptMe = true) {
let res = context.$parent.$children.filter(item => {
return item.$options.name === componentName;
});
let index = res.findIndex(item => item._uid === context._uid);
if (exceptMe) res.splice(index, 1);
return res;
}
export {
findBrothersComponents };
他の4関数と比較して、findBrothersComponentsパラメータが 1 つありexceptMe、それ自体を除外するかどうかを指定します。デフォルトは ですtrue。兄弟コンポーネントを見つける方法は、最初にそれらを取得することですcontext.$parent.$children。つまり、現在それ自体が含まれている親コンポーネントのすべてのサブコンポーネントを取得し、それらのすべてに 3 番目のパラメーターがありますexceptMe。Vue.jsコンポーネントをレンダリングするとき、組み込み属性が各コンポーネントに追加されます _uid。これは_uid繰り返されないため、一連の兄弟コンポーネントから自分自身を除外できます。