84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我正在 Vue3 中建立一個動態元件。我使用 v-bind 提供 props。
Vue3
動態元件
v-bind
props
我想使用提供/注入功能。如何將我提供的屬性放入動態元件中。我的動態元件在 setup 函數中呼叫 inject,並預期為其子元件提供值。
提供/注入
setup
inject
提供
雖然這在 Vue 上沒有記錄,但我沒有成功嘗試:
甚至嘗試將 provide 物件放入 props 物件中。
provide
瀏覽 Vue3 原始程式碼後,無法直接在範本中向動態元件指示#provide規格。必須在託管動態元件的父級的設定函數或選項中,或在動態元件的設定或選項中呼叫它。
#provide
這兩個選項是:
setup() { provide('message', 'hello') }
這對我不起作用,因為我的設定函數在我的動態元件被啟動之前就被呼叫了;我還需要將元件類型和提供的值一起設定。
function setComponent(someImportedComponent, providedValues) { myComponent.value = someImportedComponent myProps.value = { toProvide: providedValues } }
我的元件
setup() { for(let [key,value] of Object.entries(props.toProvide) ) { provide(key, value) } }
現在這有它的問題,因為每個動態元件現在都需要負責了解並呼叫傳入的提供項。
解決每個元件需要了解所提供值的方法是建立一個提供值的中間元件。
可提供(中間元件)
像這樣使用它:
更簡潔的解決方案是建立一個包裝器元件,類似於 keep-alive 的工作原理。目標元件只需放入預設槽即可。
預設槽
提供.vue
並這樣使用它:
瀏覽 Vue3 原始程式碼後,無法直接在範本中向
動態元件
指示#provide
規格。必須在託管動態元件的父級的設定函數或選項中,或在動態元件的設定或選項中呼叫它。這兩個選項是:
provide
。這對我不起作用,因為我的設定函數在我的動態元件被啟動之前就被呼叫了;我還需要將元件類型和提供的值一起設定。
我的元件
現在這有它的問題,因為每個動態元件現在都需要負責了解並呼叫傳入的提供項。
解決方案1
解決每個元件需要了解所提供值的方法是建立一個提供值的中間元件。
可提供(中間元件)
像這樣使用它:
解決方案2
更簡潔的解決方案是建立一個包裝器元件,類似於 keep-alive 的工作原理。目標元件只需放入
預設槽
即可。提供.vue
並這樣使用它: