vue3?使用provide?inject父子組件傳值失敗且子組件不響應

更新時間：2023年08月22日 14:23:26 作者：_Jyann_

這篇文章主要介紹了vue3使用provide?inject父子組件傳值傳不過去且傳遞后子組件不具備響應性問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1.普通傳值

傳遞普通值，直接父級

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

子級：

const message = inject('message')

2.通過axios異步獲取數(shù)據(jù)后傳值

問題：

在項目中一般是通過接口請求到數(shù)據(jù)后再傳遞給子級，provide和inject如果直接再調用接口的方法內傳值會報警告，而且值也傳遞不過去。就是說provide()必須在setup根節(jié)點處才能使用，在方法里面用是不行的

但是，直接在setup根節(jié)點處傳遞，由于數(shù)據(jù)是異步獲取的，直接傳遞時數(shù)據(jù)是還沒有值的，傳遞過去的都是聲明時的初始值。

解決：

使用方法包裝需要傳遞的值，然后provide()傳遞過去的是方法，inject()時通過方法調用獲取值

父級：

const provideData = () =>{
? return {
? ? columns: columns.value,
? ? data: resourceData.value,
? ? pageNum: pageNum.value,
? ? total: total.value,
? ? pageSize: pageSize.value
? }
}
provide('provideData',provideData);
子級獲?。?
const provideData = inject('provideData');
const columns = provideData().columns;
const data = provideData().data;
const total = provideData().total;
const pageNum = provideData().pageNum;
const pageSize = provideData().pageSize;

3.父組件值更改后，子組件的值不具備響應性

vue本身就是這樣設計的，注入后子組件的值不具有響應性，但是我們可以進行處理

以方法形式傳遞值

const provideData = () =>{
  return {
    columns: ()=>columns.value,
    data: ()=>resourceData.value,
    pageNum: ()=>pageNum.value,
    total: ()=>total.value,
    pageSize: ()=>pageSize.value
  }
}
provide('provideData',provideData);

子組件中再通過方法進行調用：

const provideData = inject('provideData');
const columns = computed(() => provideData().columns())
const data = computed(() => provideData().data())
const total = computed(() => provideData().total())
const pageNum = computed(() => provideData().pageNum())
const pageSize = computed(() => provideData().pageSize())

以對象形式傳遞值

父組件：

const provideData = () =>{
  return {
    data:{
      columns: columns.value,
      data: resourceData.value,
      pageNum: pageNum.value,
      total: total.value,
      pageSize: pageSize.value
    }
  }
}
provide('provideData',provideData);

子組件：

const provideData = inject('provideData');
const columns = computed(() => provideData().data.columns)
const data = computed(() => provideData().data.data)
const total = computed(() => provideData().data.total)
const pageNum = computed(() => provideData().data.pageNum)
const pageSize = computed(() => provideData().data.pageSize)

以上就是vue3 使用provide inject父子組件傳值傳不過去且傳遞后子組件不具備響應性的詳細內容，更多關于vue3 使用provide inject父子組件傳值傳不過去且傳遞后子組件不具備響應性的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: