快捷導(dǎo)航

vue中的inject用法及說明

更新時(shí)間：2022年08月25日 08:40:34 作者：斜影梧桐

這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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ì)讓人頭疼起來

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

他是先在父組件直接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ù)為