provide/inject
vue中使用provide/inject進行資料傳遞
provide 和 inject 主要在開發高階外掛/元件庫時使用。並不推薦用於普通應用程式程式碼中;
這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在其上下游關係成立的時間裡始終生效。
provide 選項應該是一個物件或返回一個物件的函式
在父元件中與data函式同級
provide(){
return {
provideData:this.provideData,
value:this.value
//或者函式。。
}
}
inject 選項應該是:一個字串陣列,或一個物件
子孫元件中與data函式同級
inject:['provideData','value'],
created(){
console.log(this.provideData)
},
provide 和 inject 繫結並不是可響應的,如果你傳入了一個可監聽的物件,那麼其物件的 property 還是可響應的。
比如有個el-input事件 實時改變provide物件的value
inputChange(e){
this.provideData.value=e
console.log(e)
}
相關文章
- 元件通訊 provide inject元件IDE
- 元件間通訊provide和inject元件IDE
- 淺談vue中provide和inject 用法VueIDE
- Vue入門--第五天--provide/injectVueIDE
- provide 和 inject 實現祖先與後代的通訊IDE
- VueUse 是怎麼封裝Vue3 Provide/Inject 的?Vue封裝IDE
- vue 3 學習筆記 (八)——provide 和 inject 用法及原理Vue筆記IDE
- Vue.js 原始碼學習五 —— provide 和 inject 學習Vue.js原始碼IDE
- 劍走偏鋒之Vue元件通訊(二)——利用provide / inject屬性構建全域性狀態管理Vue元件IDE
- 059、Vue3+TypeScript基礎,頁面通訊之父元件provide資料,子孫元件用inject直接使用VueTypeScript元件IDE
- Vue 折騰記 - (18) 用Vue的Inject Provide結合Event Bus來實現區域性的狀態維護VueIDE
- JAVA CDI @Inject基本用法Java
- Please provide a valid cache pathIDE
- Although it does not provide the most Parajumpers On SaleIDE
- sidecar-inject程式碼分析IDE
- Inject js code to exchange 2013JS
- How to inject value into bean properties in SpringBeanSpring
- Flutter | 狀態管理特別篇 —— ProvideFlutterIDE
- A gateway to automatically provide RESTful API for gRPCGatewayIDERESTAPIRPC
- VUE - MVVM - part13 - inject & 總結VueMVVM
- Angular 14 新的 inject 函式介紹Angular函式
- Flutter UI使用Provide實現主題切換FlutterUIIDE
- Provide an Alternative View to Data Using Splitter Window (轉)IDEView
- @Resource,@Autowired,@Inject3種注入方式詳解
- Microsoft WHQL certified company To provide high quality WHQLcertification servicesROSIDE
- Dagger 2 系列(二) -- 基礎篇:@Inject、@Component
- 實現 VUE 中 MVVM – step13 – inject & 總結VueMVVM
- 針對新型程式注入技術Ctrl-Inject原理分析
- Android so注入(inject)和Hook技術學習(二)——GAndroidHook
- 在SAP ABAP裡使用註解@Inject模擬Java SpringJavaSpring
- ubuntu下程式kidle_inject致使編譯軟體很慢Ubuntu編譯
- 一文讓您搞清楚@Resources, @Inject和@Autowired的區別
- Angular @Inject 註解的實際應用例子和工作原理淺析Angular
- 使用 Angular 14 的 inject 函式最佳化對 Ngrx 的使用方式Angular函式
- Angular 14 inject 函式使用過程中的一些注意事項Angular函式
- spring下應用@Resource, @Autowired 和 @Inject註解進行依賴注入的差異Spring依賴注入
- Unable to load bean: type:org.apache.struts2.views.gxp.inject.InjectedObjectContainer class:org.apacBeanApacheViewObjectAI
- Exception starting filter struts2 java.lang.RuntimeException: com.opensymphony.xwork2.inject.DependeExceptionFilterJava