vue中的provide和inject
阅读element-ui源码，发现在设计子组时件用到了 inject 属性，随即查了一下 官方文档 ，得知vue在2.2.0版本里新增了 provide / inject ：
按照文档的描述，我的理解是：在多级嵌套的组件体系中，某级外层组件可以通过 provide 属性向其下任意一级子组件提供一个依赖，不管层级有多深；而某级子组件则可以通过 inject 属性接收来自其上任意一级父组件提供的依赖（通过 this.xxx 形式获取）。注意： provide 和 inject 需要一起使用。
举个例子说明：
清朝三位皇帝：康熙（玄烨）、雍正（胤禛）、乾隆（弘历）是祖孙三代，我们用vue组件的思想表示他们之间的关系，并模拟他们的一段对话，以此理解vue中的 provide 和 inject 。
调用组件——大清帝国：qing-dynasty.vue
定义爷爷组件——康熙皇帝：kangxi.vue
定义儿子组件——雍正皇帝：yongzheng.vue
定义孙子组件——乾隆：qianlong.vue
绛旓細涓昏閫傚悎鐖跺瓙缁勪欢锛岀埗鍜屽瓙瀛欑粍浠堕氳, 鍙互鐪嬩綔鏄 闀胯窛绂荤殑 prop 锛屾敮鎸佸湪setup()涓娇鐢 浣跨敤inject 褰撻渶瑕佹敮鎸佸搷搴斿紡娉ㄥ叆锛屽彧闇瑕佸湪provide鍊间娇鐢╮ef 鎴栫潃reactive 瀛愮粍浠讹細attrs 鏂瑰紡锛氬鏋滆繖涓粍浠舵帴鏀朵竴涓 id attribute 鍜屼竴涓 v-on:close 鐩戝惉鍣紝閭ｄ箞 $attrs 瀵硅薄鐜板湪灏嗗涓嬫墍绀:Vue2.x 浣跨敤...
绛旓細vue鐖跺瓙缁勪欢閫氫俊鏂瑰紡鏈夊摢浜涳紵鎴戜滑涓璧蜂簡瑙ｄ竴涓嬪惂锛乿ue鐖跺瓙缁勪欢閫氫俊鏂瑰紡鏈塒rop锛$emit銆$attrs 銆 $listeners銆provide 銆 inject 锛宻ync璇硶绯栧拰涓浜涘叾浠栨柟寮忋備互涓嬫槸甯哥敤閫氫俊鏂瑰紡鐨勫叿浣撲粙缁嶃1銆乸rop 杩欎釜鍦ㄦ垜浠棩甯稿紑鍙戝綋涓敤鍒扮殑闈炲父澶氥傜畝鍗曟潵璇达紝鎴戜滑鍙互閫氳繃 Prop 鍚戝瓙缁勪欢浼犻掓暟鎹傜敤涓涓舰璞＄殑...
绛旓細绁栧厛缁勪欢涓氳繃 provider 鏉ユ彁渚涘彉閲忥紝鐒跺悗鍦ㄥ瓙瀛欑粍浠朵腑閫氳繃 inject 鏉ユ敞鍏ュ彉閲忋provide / inject API 涓昏瑙ｅ喅浜嗚法绾х粍浠堕棿鐨勯氫俊闂锛屼笉杩囧畠鐨勪娇鐢ㄥ満鏅紝涓昏鏄瓙缁勪欢鑾峰彇涓婄骇缁勪欢鐨勭姸鎬侊紝璺ㄧ骇缁勪欢闂村缓绔嬩簡涓绉嶄富鍔ㄦ彁渚涗笌渚濊禆娉ㄥ叆鐨勫叧绯汇傝繖绉嶆柟娉曢氳繃涓涓┖鐨 Vue 瀹炰緥浣滀负涓ぎ浜嬩欢鎬荤嚎锛堜簨浠朵腑蹇冿級锛...
绛旓細鎻愮ず锛 provide 鍜 inject 缁戝畾骞朵笉鏄彲鍝嶅簲鐨勩傜劧鑰岋紝濡傛灉浣犱紶鍏ヤ簡涓涓彲鐩戝惉鐨勫璞★紝閭ｄ箞鍏跺璞＄殑灞炴ц繕鏄彲鍝嶅簲鐨勩傚姩鎬佺粍浠讹細寮傛缁勪欢锛氭贩鍏 mixin 鎻愪緵浜嗕竴绉嶉潪甯哥伒娲荤殑鏂瑰紡锛屾潵鍒嗗彂 Vue 缁勪欢涓殑鍙鐢ㄥ姛鑳姐備竴涓贩鍏ュ璞″彲浠ュ寘鍚换鎰忕粍浠堕夐」銆傚綋缁勪欢浣跨敤娣峰叆瀵硅薄鏃讹紝鎵鏈夋贩鍏ュ璞＄殑閫夐」...
绛旓細provide / inject 瀹樼綉浠嬬粛 vue2.2.0 鏂板API锛岃繖瀵归夐」闇瑕佷竴璧蜂娇鐢紝 浠ュ厑璁镐竴涓鍏堢粍浠跺悜鍏舵墍鏈夊瓙瀛欏悗浠ｆ敞鍏ヤ竴涓緷璧栵紝涓嶈缁勪欢灞傛鏈夊娣憋紝骞跺湪鍏朵笂涓嬫父鍏崇郴鎴愮珛鐨勬椂闂撮噷濮嬬粓鐢熸晥 銆傚鏋滀綘鐔熸倝 React锛岃繖涓 React 鐨勪笂涓嬫枃鐗规у緢鐩镐技銆 provide / inject API 涓昏瑙ｅ喅浜嗚法绾х粍浠堕棿鐨勯氫俊闂...
绛旓細provide/inject 鑳藉瀹炵幇绁栧厛鍜屽悗浠ｄ箣闂寸殑浼犲 attrs $listeners 闈瀙rop鐗规 ,鍙互鍖呭惈鎵鏈夌埗浣滅敤鍩熺殑缁戝畾锛坈lass style闄ゅ锛夊苟涓斿彲浠ラ氳繃v-bind=鈥$attrs鈥濅紶鍏ョ粍浠跺唴閮紝鍒涘缓楂樼骇缁勪欢鏃剁壒鍒湁鐢 鎻掓Ы璇硶鏄vue瀹炵幇鐨勫唴瀹瑰垎鍙慳pi 閫傚悎澶嶅悎缁勪欢寮鍙戯紝鍦ㄩ氱敤缁勪欢搴撶殑寮鍙戜腑澶ч噺浣跨敤銆傚尶鍚嶆彃妲 鍏峰悕鎻掓Ы...
绛旓細鐩稿綋浜庢寜ctrl+F5 寮哄埗鍒锋柊閭ｇ锛屾暣涓〉闈㈤噸鏂板姞杞斤紝浼氬嚭鐜颁竴涓灛闂寸殑绌虹櫧椤甸潰锛屼綋楠屼笉濂 锛1锛夋柊寤轰竴涓┖鐧介〉闈 reload.vue锛氾紙2锛夐渶瑕佸埛鏂扮殑椤甸潰锛屽厛璺宠浆鍒皉eload.vue锛屽啀璺宠浆鍥炲師椤甸潰锛屼粠鑰屽疄鐜板埛鏂帮紙璺緞涓婂甫param鐨勪笉鑳界敤锛夛細锛1锛堿pp.vue娣诲姞provide锛屽拰data涓鏍凤紝杩斿洖涓涓璞★細锛2锛夐渶瑕佸埛鏂扮殑...
绛旓細鍙互浣跨敤provide閰嶅悎inject銆傞鍏堟垜浠渶瑕佸湪Appvue涓淇敼锛岄氳繃瀹氫箟reload鏂规硶锛屾帶鍒秗outerview鐨勬樉闅愶紝鐒跺悗鍦ㄩ渶瑕佸埛鏂伴〉闈㈢殑缁勪欢涓敞鍏ヤ緷璧栵紝鏈鍚庣洿鎺ヨ皟鐢╮eload鏂规硶灏辫兘瀹炵幇椤甸潰鐨勫埛鏂般俈uejs鏄竴娆炬祦琛岀殑JavaScript鍓嶇妗嗘灦锛屾棬鍦ㄦ洿濂藉湴缁勭粐涓庣畝鍖朩eb寮鍙戙俈ue鎵鍏虫敞鐨勬牳蹇冩槸MVC妯″紡涓殑瑙嗗浘灞傦紝鍚屾椂锛屽畠涔熻兘鏂逛究...
绛旓細鏈鍚庢牴鎹姸鎬佺殑鍙樺寲锛屾覆鏌撳埌瑙嗗浘涓傛彁渚/娉ㄥ叆瀹樻柟缃戠珯浠嬬粛 Vue2.2.0澧炲姞浜咥PI銆傝繖涓瀵归夐」闇瑕佷竴璧蜂娇鐢紝浠ュ厑璁镐竴涓鍏堢粍浠跺悜瀹冪殑鎵鏈夊悗浠ｆ敞鍏ヤ竴涓緷璧栭」锛屼笉绠＄粍浠剁骇鍒湁澶氭繁锛屽彧瑕佸畠鐨勪笂涓嬫父鍏崇郴寤虹珛璧锋潵锛屽畠灏变細涓鐩寸敓鏁堛傚鏋滀綘鐔熸倝React锛岃繖鍜孯eact鐨勪笂涓嬫枃鐗瑰緛闈炲父鐩镐技銆provide/injectAPI涓昏瑙ｅ喅...
绛旓細Vue3瀹樼綉 鍦ㄧ嚎婧愮爜缂栬瘧鍦板潃 setup 鏄墍鏈 Composition API 鐨勫鍣紝鍊间负涓涓嚱鏁般傜粍浠朵腑鎵鐢ㄥ埌鐨勬暟鎹佹柟娉曠瓑绛夛紝鍧囪閰嶇疆鍦 setup 涓紝瀹冧細鍦 beforeCreate 涔嬪墠鎵ц涓娆★紝娉ㄦ剰锛 V3 閲 this 涓嶅啀鏄寚鍚 Vue 瀹炰緥锛岃闂 this 浼氭槸 undefined 灏介噺涓嶈涓嶸2閰嶇疆娣风敤 V2 閰嶇疆锛 data 銆 methos 銆 ...
