vue中的inject用法及說明

2022-08-25 10:02:03

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

元件化開發是必不可少的,可是也會伴隨著很多頭疼的事,有時候元件巢狀太深會讓頁面傳值太麻煩,這時候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屬於同步的所以執行起來

他是先在父元件直接provide 然後子元件Inject 執行

導致出現 null

解決的辦法

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

要傳入的資料為