有沒有辦法在主機設定函數以外的 Vue3 動態元件中聲明提供/注入？

Question

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

<code><component :is='MyComponent' v-bind='myProps' />
</code>

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

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

<component :is='MyComponent' v-bind='myProps' :provide='myProvidedProps'/>

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

Answer 1

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

這兩個選項是：

1. 您在託管動態元件的元件上呼叫 provide。

setup() {
  provide('message', 'hello')
}

<template>
  <component :is='myComponent' />
</template>

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

2. 將要提供的項目作為 prop 傳送到元件中，並讓動態元件呼叫它們。

function setComponent(someImportedComponent, providedValues) {
  myComponent.value = someImportedComponent
  myProps.value = {
    toProvide: providedValues
  }
}

<template>
  <component :is='myComponent' v-bind='myProps' />
</template>

我的元件

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

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

解決方案1

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

可提供（中間元件）

<script setup lang="ts">
import {provide} from 'vue'

const props = defineProps<{
  is: any
  provide?: Record<string, any>
  [key: string]: any
}>()

if (props.provide) {
  for (const [key, value] of Object.entries(props.provide)) {
    provide(key, value)
  }
}

const _props = Object.fromEntries(Object.entries(props).filter(it => {
  return it[0] !== 'is' && it[0] !== 'provide'
}))
</script>

<template>
  <component :is="is" v-bind="_props"/>
</template>

像這樣使用它：

<template>
  <providable :is="myComponent" :provide='toProvide' v-bind='myProps' />
</template>

解決方案2

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

提供.vue

<script setup lang="ts">
import {provide} from 'vue'

const props = defineProps<{
  value: Record<string, any>
}>()

for (const [key, value] of Object.entries(props.value)) {
  provide(key, value)
}
</script>

<template>
  <slot name="default"/>
</template>

並這樣使用它：

<template>
  <provide value='toProvide'>
    <my-component v-bind='myProps' />
  </provide>
</template>