[TOC] >[success] # 編寫自己的工具類進行父子傳遞 <a href='https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bc844166fb9a05cf52af65f'>文章來自AresnTalkingData 前端架構師，iView 作者 發布在掘金網小冊中內容啟發整理</a> 如果你有能力有錢請你購買原作者文找那個，尊敬每一個原作者是我們應該做的，不要做代碼行業的伸手黨 感謝這些大佬的文章，本內容是根據大佬的文章二次整理，用更通俗的理解讓初學者也能看懂 ~~~ 1.準備工作，'iview' 作者喜歡在vue結構目錄中創建一個lib文件夾，并且在文件夾中創建一個'utils' 文件專門用來寫自己的工具方法，結構目錄如下： │ ├── 'lib' //工具包 │ ├── 'tools.js' // 存放和業務無關工具性質的js代碼 │ └── 'util.js' //存放和業務相關工具性質的js代碼 2.下面將會做這個五個場景父子傳遞的工具類: 2.1.由一個組件，向上找到最近的指定組件； 2.2.由一個組件，向上找到所有的指定組件； 2.3.由一個組件，向下找到最近的指定組件； 2.4.由一個組件，向下找到所有指定的組件； 2.5.由一個組件，找到指定組件的兄弟組件。 3.注意這次的工具組件傳遞的查找方法和'dispatch'不同的，這次是找整個組件，而'dispatch' 是吧某個 方法傳遞 ~~~ >[info] ## 由一個組件，向上找到最近的指定組件 -- findComponentUpward ~~~ 1.思路:編寫這個函數時候，需要的形參分析，根據需要我們是要找到某個組件的最近的指定的父組件， 因此某個組件肯定是參數之一，指定的父組件就是參數之二 2.利用'dispatch' 思想我們需要去遞歸，一直找到當前組件的父組件，知道找到和我們需要匹配的組件 ，因此需要'$parent',和'$options.name' ~~~ >[danger] ##### 在utils 中正式編寫 ~~~ 1.context 參數代表當前起點，也就當前組件的'this',componentName 就是目標組件的，可以理解成當前'this' 向上的某個父組件或者有可能是他的爺爺組件 2.邏輯 先獲取當前組件的'$parent' 和 'componentName' 父組件的名稱，然后去循環如果他有父組件，并且 組件沒有名字或者名字不等于目標的名字，我們就繼續遞歸循環查找，直到找到返回整個對象 3.'iview' 作者的解釋: 3.1.第一個參數一般都是傳入 this，即當前組件的上下文（實例）。 4.提醒自己一點:在寫代碼的時候一定要對某些條件做判斷，例如下面的代碼中的 'if(parent)' 就可以減收不必要 的操作 ~~~ ~~~ 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 }; ~~~ >[danger] ##### 使用篇章 * 創建一個test-a 父組件 ~~~ <!--test-a 組件作為父組件--> <template> <test-b></test-b> </template> <script> import testB from './test-b' export default { name: "test-a", components: { testB }, methods:{ sayHiB(){ console.log('我是A組件的方法，但是現在被B調用了'); } } } </script> <style scoped> </style> ~~~ * 組件B 子組件去使用組件a的方法 ~~~ <template> <div> 組件 B </div> </template> <script> import {findComponentUpward} from '../../lib/utils' export default { name: "test-b", // 發現一個規律類似這種組件調用 最好是在生命周期時候就注冊好 // 不要在點擊的時候在觸發 // 也可以吧這個放回的對象放進B組件的 data中方便調用 mounted () { const comA = findComponentUpward(this, 'test-a'); if (comA) { comA.sayHiB(); // 我是A組件的方法，但是現在被B調用了 } } } </script> <style scoped> </style> ~~~ >[info] ## 由一個組件，向上找到所有的指定組件 -- findComponentsUpward ~~~ 1.findComponentsUpward 場景遞歸后續研究 做標記 ~~~ >[danger] ##### findComponentsUpward ~~~ // 由一個組件，向上找到所有的指定組件 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 }; ~~~ >[info] ## 由一個組件，向下找到最近的指定組件 -- findComponentDownward ~~~ 1.原理就是找到當前組件的所有子組件，然后遞歸查找看那個子組件符合我們傳入的名字 如果相等就是我們需要的組件 2.這里要說明一個數組的循環，for ...in 和 for ...of，in簡單粗暴理解循環對象用的k值 ，因此循環數組的時候是腳標，of 是用來循環數組中的內容 ~~~ >[danger] ##### findComponentDownward ~~~ 1.找到當前組件的所有子組件利用'$children',如果子組件中也沒有就去子組件的子組件找 ，也就是遞歸查找，知道找到了 返回對應的子組件 2.這里注意循環數組的循環使用 for ...of ~~~ ~~~ function findComponentDownward (context,componentName){ let childrens = context.$children // 定義一個接受 變量 let children = null; if(childrens.length>0){ 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 }; ~~~ >[danger] ##### 案例 * 父組件A ~~~ <!--test-a 組件作為父組件--> <template> <test-b></test-b> </template> <script> import testB from './test-b' import {findComponentDownward } from '../../lib/utils' export default { name: "test-a", components: { testB }, mounted(){ // 調用子組件方法 const comB = findComponentDownward(this, 'test-b'); if (comB) { comB.sayHiB(); // 我是B組件的方法，但是現在被A調用了 } } } </script> <style scoped> </style> ~~~ * 子組件B ~~~ <template> <div> 組件 B </div> </template> <script> export default { name: "test-b", methods:{ sayHiB(){ console.log('我是B組件的方法，但是現在被A調用了'); } } } </script> <style scoped> </style> ~~~ >[info] ## 由一個組件，向下找到所有的指定組件 -- findComponentsDownward ~~~ 1.findComponentsDownward 場景遞歸后續研究 做標記 ~~~ >[danger] ##### findComponentsUpward ~~~ 1.后續理解'reduce' 方法 ~~~ ~~~ // 由一個組件，向下找到所有指定的組件 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 }; ~~~ >[info] ## 找到指定組件的兄弟組件——findBrothersComponents ~~~ ~~~ >[danger] ##### findBrothersComponents ~~~ 1.這里使用了三個參數，和之前一樣錢兩個分別是起始組件對象，要找的組件名字， 這里還用了數組方法'findIndex' 用來找到腳標 2.對第三個參數做詳細講解，第三個參數是，是否包含自己，咋一看覺得無法理解， 舉個例子,想彈窗這類組件 在一個頁面可能會使用多次，但是她們的名字相同，但是 我在對應的兄弟組件肯定是不想包含本身，因此利用了'_uid' 唯一標識做了標記去重 ~~~ ~~~ function findBrothersComponents (context,componentName,exceptMe = true) { // 找到符合的子組件名稱數組 let res = context.$parent.$children.filter(item =>{ return item.$options.name === componentName; }) // 找到當前本身組件在數組中的位置 let index = res.findIndex(item =>{ return item._uid === context._uid }) if (exceptMe) res.splice(index, 1); return res; } export { findBrothersComponents }; ~~~ >[danger] ##### 案例說明 * 父組件中同一個組件調用兩次 ~~~ <!--test-a 組件作為父組件--> <template> <div> <test-b></test-b> <test-b></test-b> </div> </template> <script> import testB from './test-b' export default { name: "test-a", components: { testB }, } </script> <style scoped> </style> ~~~ * 子組件中兄弟組件默認不包括自己 ~~~ <template> <div> 組件 B </div> </template> <script> import {findBrothersComponents } from '../../lib/utils' export default { name: "test-b", methods:{ sayHiB(){ console.log('我是B組件的方法，但是現在被A調用了'); } }, mounted(){ const comB = findBrothersComponents(this, 'test-b'); if (comB) { console.log(comB); } } } </script> <style scoped> </style> ~~~