vue中的inject怎么使用

這篇文章主要介紹“vue中的inject怎么使用”，在日常操作中，相信很多人在vue中的inject怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue中的inject怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

vue inject用法

作用：刷新vue組件

使用方法：

在APP.vue中

 provide(){
            return {
                reload:this.reload
            }
        },
methods:{
            reload(){
                this.isRouterAlive = false
                this.$nextTick(function(){
                    this.isRouterAlive = true
                })
            }
        }

子組件中使用：

inject: ['reload'],

引入后直接this.reload()即可

使用prvide inject的超級(jí)的一個(gè)大坑

組件化開發(fā)是必不可少的,可是也會(huì)伴隨著很多頭疼的事,有時(shí)候組件嵌套太深會(huì)讓頁(yè)面?zhèn)髦堤闊?這時(shí)候vuex因此誕生,但是有時(shí)候我們不想用vuex,有沒有其他更簡(jiǎn)單的方法呢？是 provide inject  官方提供的這兩個(gè)api 首先我們不考慮其他因素，專門看看 這兩個(gè)單詞是什么意思 provide（提供） inject(注入)

專門從字面意思就應(yīng)該知道了 應(yīng)該是父組件用provide 子組件用inject

使用的方法也很簡(jiǎn)單

import {ref,reactive, provide} from 'vue'

在父組件引入這個(gè) api provide

然后想穿什么值

provide('data',message)

data值得是props名字 告訴子組件 你要接收就用用data message是你要傳入的數(shù)據(jù)

子組件接收

const injectaa = inject('data')

不需要引入inject 就能收到值了

很好,你們以為這就完了嗎？下面講的是一個(gè)超級(jí)大坑

就是如果傳入的是一個(gè)異步數(shù)據(jù) 這個(gè)api就會(huì)讓人頭疼起來(lái)

因?yàn)檫@兩個(gè)api屬于同步的所以執(zhí)行起來(lái)

他是先在父組件直接provide 然后子組件Inject 執(zhí)行

導(dǎo)致出現(xiàn) null

解決的辦法

 const message = ref([])
 console.log('1先執(zhí)行')
 
 provide('message',message)
 
 function getGood(){
 
 apiGood.getGoodId(id).then(res=>{
   
 message.value = res.data
 
 console.log
 })

 要傳入的數(shù)據(jù)為

const message = ref([])

這樣才能傳過(guò)去

但是又出現(xiàn)新的問(wèn)題

我們已經(jīng)看到值了 但是進(jìn)一步打印會(huì)發(fā)現(xiàn)

 是個(gè)空的,是不是很奇怪 直接打印Inject就能出來(lái)值,inject.value就出不了

其實(shí)這些值都是存在虛擬DOM的所以只能看還沒加載過(guò)來(lái),所以只能觀看而不可褻玩焉

你想要打印這些值只能讓console.log變?yōu)橐粋€(gè)異步

讓那些值傳過(guò)來(lái)在執(zhí)行

如是

值就出來(lái)了

到此，關(guān)于“vue中的inject怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！