vue中的inject用法及說明

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

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

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的超級的一個大坑

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

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

使用的方法也很簡單

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

在父組件引入這個 api provide

然后想穿什么值

provide('data',message)

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

子組件接收

const injectaa = inject('data')

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

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

就是如果傳入的是一個異步數據這個api就會讓人頭疼起來

因為這兩個api屬于同步的所以執(zhí)行起來

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

導致出現 null

解決的辦法

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

要傳入的數據為