Having delved into the Vue3 source code, it appears that there is no direct way to specify the provide spec for a dynamic component in the template itself. Instead, it must be invoked in the setup function or options of the parent component hosting the dynamic component, or within the setup or options of the dynamic component.
There are two possible approaches:
- Call
provide on the component that hosts the dynamic component.
setup() {
provide('message', 'hello')
}
<template>
<component :is='myComponent' />
</template>
This method did not work for me as my setup function was executed before the activation of the dynamic component; besides, I needed to set both the component type and the provided value simultaneously.
- Pass the items to be provided into the component as props and let the dynamic component invoke provide on them.
function setComponent(someImportedComponent, providedValues) {
myComponent.value = someImportedComponent
myProps.value = {
toProvide: providedValues
}
}
<template>
<component :is='myComponent' v-bind='myProps' />
</template>
MyComponent
setup() {
for(let [key,value] of Object.entries(props.toProvide) ) {
provide(key, value)
}
}
However, this approach has its drawbacks as every dynamic component now needs to handle and invoke the passed-in provide items.
Solution 1
To circumvent each component needing awareness of the provided values, one can create an intermediary component that handles the provisioning of values.
Providable (Intermediate Component)
<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>
Usage example:
<template>
<providable :is="myComponent" :provide='toProvide' v-bind='myProps' />
</template>
Solution 2
A more elegant solution involves creating a wrapper component, similar to how keep-alive operates. The target component is placed within the default slot.
Provide.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>
Usage example:
<template>
<provide value='toProvide'>
<my-component v-bind='myProps' />
</provide>
</template>