vue2實現(xiàn)provide inject傳遞響應(yīng)式
更新時間：2021年05月21日 16:18:17 作者：TAOBO
在看element-ui的源碼的時候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下
1. vue2 中的常規(guī)寫法
// 父級組件提供 'foo'
var Provider = {
data(){
return {
foo: 'bar'
}
}
provide: {
fooProvide: this.fooFn // 傳遞一個引用類型函數(shù)過去
},
methods:{
fooFn() {
return this.foo
}
}
}
var Child = {
inject: ['fooProvide'],
computed:{
fooComputed(){
return this.fooProvide() // 因為傳遞過來是個引用類型的函數(shù)
}
}
created () {
console.log(this.fooComputed)
}
// ...
}
2. vue2 中的不太常規(guī)寫法,但用得舒服.(大概用法還是一樣,只是傳遞的值變成 this--> 整個實例)
// 父級組件提供 'foo'
var Provider = {
data(){
return {
foo: 'bar',
other:'...'
}
}
provide: {
app: this// 傳遞整個this過去
},
mounted(){
const that = this
setTimeout(()=>{
that.foo = '改變值'
},4000)
}
}
var Child = {
inject: ['app'],
created () {
console.log(this.app.foo) // this.app 下面都是響應(yīng)式的,因為都是同一實例下的引用
}
// ...
}
3. vue2 + ts (因為ts之前沒用過的話確實不知道怎么用,所以示例一下)
Provide 方式:
1. @Provide() foo = 'foo'
2. @Provide('bar') baz = 'bar'
Inject 方式:
1. @Inject() foo: string
2. @Inject('bar') bar: string
3. @Inject(s) baz: string
示例:
// 父級組件提供 'fooProvide'
@Provide('fooProvide') // 隨意起名,傳遞跟接收一樣就行.但一般保持跟下面變量一樣
fooProvide = this.refreshNumFn // 變量接收一下要傳遞的值
refreshNumFn() {
return this.refreshNum
}
// 子組件接收
@Inject('fooProvide') fooProvide: any
get valueA(): any {
return this.fooProvide()
}
mounted(){
console.log(this.valueA) // ...
}
到此這篇關(guān)于vue2實現(xiàn)provide inject傳遞響應(yīng)式 的文章就介紹到這了,更多相關(guān)vue2 provide inject 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了vue全局數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue如何實現(xiàn)關(guān)閉對話框后刷新列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要給大家介紹了關(guān)于vue3.0項目快速搭建的相關(guān)資料,本文通過圖文以及實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-12-12
例如組件使用頻率非常高,幾乎每個頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊全局組件的相關(guān)知識,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)拖拽功能，拖動方塊進行移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-05-05
Vue中watch監(jiān)聽屬性新舊值相同的問題解決方案
這篇文章主要給大家分享了Vue中watch監(jiān)聽屬性新舊值相同問題解決方案,如果有遇到相同問題的朋友,可以參考閱讀本文2023-08-08
Vue 最獨特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。本文將通過示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下2022-03-03