vue3?使用provide?inject父子組件傳值失敗且子組件不響應(yīng)

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

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

1.普通傳值

傳遞普通值，直接父級(jí)

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

子級(jí)：

const message = inject('message')

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

問(wèn)題：

在項(xiàng)目中一般是通過(guò)接口請(qǐng)求到數(shù)據(jù)后再傳遞給子級(jí)，provide和inject如果直接再調(diào)用接口的方法內(nèi)傳值會(huì)報(bào)警告，而且值也傳遞不過(guò)去。就是說(shuō)provide()必須在setup根節(jié)點(diǎn)處才能使用，在方法里面用是不行的

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

解決：

使用方法包裝需要傳遞的值，然后provide()傳遞過(guò)去的是方法，inject()時(shí)通過(guò)方法調(diào)用獲取值

父級(jí)：

const provideData = () =>{
? return {
? ? columns: columns.value,
? ? data: resourceData.value,
? ? pageNum: pageNum.value,
? ? total: total.value,
? ? pageSize: pageSize.value
? }
}
provide('provideData',provideData);
子級(jí)獲取：
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.父組件值更改后，子組件的值不具備響應(yīng)性

vue本身就是這樣設(shè)計(jì)的，注入后子組件的值不具有響應(yīng)性，但是我們可以進(jìn)行處理

以方法形式傳遞值

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

子組件中再通過(guò)方法進(jìn)行調(diào)用：

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

以對(duì)象形式傳遞值

父組件：

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父子組件傳值傳不過(guò)去且傳遞后子組件不具備響應(yīng)性的詳細(xì)內(nèi)容，更多關(guān)于vue3 使用provide inject父子組件傳值傳不過(guò)去且傳遞后子組件不具備響應(yīng)性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: