有沒有辦法在主機設定函數以外的 Vue3 動態元件中聲明提供/注入?
P粉384366923
P粉384366923 2023-08-30 09:41:50
0
1
421

我正在 Vue3 中建立一個動態元件。我使用 v-bind 提供 props

 

我想使用提供/注入功能。如何將我提供的屬性放入動態元件中。我的動態元件在 setup 函數中呼叫 inject,並預期為其子元件提供值。

雖然這在 Vue 上沒有記錄,但我沒有成功嘗試:

甚至嘗試將 provide 物件放入 props 物件中。

P粉384366923
P粉384366923

全部回覆 (1)
P粉122932466

瀏覽 Vue3 原始程式碼後,無法直接在範本中向動態元件指示#provide規格。必須在託管動態元件的父級的設定函數或選項中,或在動態元件的設定或選項中呼叫它。

這兩個選項是:

  1. 您在託管動態元件的元件上呼叫provide
setup() { provide('message', 'hello') }

這對我不起作用,因為我的設定函數在我的動態元件被啟動之前就被呼叫了;我還需要將元件類型和提供的值一起設定。

  1. 將要提供的項目作為 prop 傳送到元件中,並讓動態元件呼叫它們。
function setComponent(someImportedComponent, providedValues) { myComponent.value = someImportedComponent myProps.value = { toProvide: providedValues } }

我的元件

setup() { for(let [key,value] of Object.entries(props.toProvide) ) { provide(key, value) } }

現在這有它的問題,因為每個動態元件現在都需要負責了解並呼叫傳入的提供項。

解決方案1

解決每個元件需要了解所提供值的方法是建立一個提供值的中間元件。

可提供(中間元件)

 

像這樣使用它:

解決方案2

更簡潔的解決方案是建立一個包裝器元件,類似於 keep-alive 的工作原理。目標元件只需放入預設槽即可。

提供.vue

 

並這樣使用它:

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!