vue中的inject用法及說明

Posted on by

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
 })

 要傳入的數據為

const message = ref([])

這樣才能傳過去

但是又出現新的問題

我們已經看到值瞭 但是進一步打印會發現

 是個空的,是不是很奇怪 直接打印Inject就能出來值,inject.value就出不瞭

其實這些值都是存在虛擬DOM的所以隻能看還沒加載過來,所以隻能觀看而不可褻玩焉

你想要打印這些值隻能讓console.log變為一個異步

讓那些值傳過來在執行

如是

 值就出來瞭

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：