Adakah terdapat cara untuk mengisytiharkan peruntukan/suntikan dalam komponen dinamik Vue3 di luar fungsi tetapan hos?

Question

Saya sedang mencipta Komponen Dinamik dalam Vue3. Saya menggunakan v-bind untuk menyediakan props.

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

Saya ingin menyediakan/menyuntik kefungsian menggunakan . Bagaimanakah saya boleh meletakkan sifat yang saya sediakan ke dalam komponen dinamik. Komponen dinamik saya memanggil inject dalam fungsi setup

Walaupun ini tidak didokumenkan pada Vue, saya mencubanya tidak berjaya:

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

Malah cuba meletakkan provide objek ke dalam objek props

Answer 1

Selepas menyemak imbas kod sumber Vue3, anda tidak boleh terus 动态组件指示provide menyatakannya dalam templat. Ia mesti dipanggil dalam fungsi tetapan atau pilihan induk yang mengehos komponen dinamik, atau dalam tetapan atau pilihan komponen dinamik.

Dua pilihan ialah:

1. Anda memanggil provide pada komponen yang menjadi hos komponen dinamik.

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

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

Ini tidak berfungsi untuk saya kerana fungsi setter saya dipanggil sebelum komponen dinamik saya diaktifkan, saya juga memerlukan jenis komponen untuk ditetapkan bersama dengan nilai yang disediakan.

2. Hantar item yang akan disediakan sebagai prop ke dalam komponen dan biarkan komponen dinamik memanggilnya.

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

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

Komponen saya

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

Sekarang ini mempunyai masalahnya, kerana setiap komponen dinamik kini perlu bertanggungjawab untuk memahami dan memanggil pembekal yang masuk.

Penyelesaian 1

Penyelesaian kepada setiap komponen yang perlu mengetahui nilai yang disediakan adalah dengan mencipta komponen perantaraan yang memberikan nilai.

Tersedia (komponen perantaraan)

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

Gunakannya seperti ini:

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

Penyelesaian 2

Penyelesaian yang lebih bersih ialah mencipta komponen pembungkus, sama seperti cara keep-alive berfungsi. Komponen sasaran hanya perlu dimasukkan 默认槽.

disediakan.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>

dan gunakannya seperti ini:

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