Adakah terdapat cara untuk mengisytiharkan peruntukan/suntikan dalam komponen dinamik Vue3 di luar fungsi tetapan hos?
P粉384366923
P粉384366923 2023-08-30 09:41:50
0
1
496
<p>Saya sedang mencipta <kod>Komponen Dinamik</kod> dalam <kod>Vue3</kod>. Saya menggunakan <code>v-bind</code> untuk menyediakan <code>props</code>. </p> <pre class="lang-js prettyprint-override"><code><komponen :is='MyComponent' v-bind='myProps' /> </code></pre> <p>Saya ingin menyediakan/menyuntik</kod> kefungsian menggunakan <kod>. Bagaimanakah saya boleh meletakkan sifat yang saya sediakan ke dalam komponen dinamik. Komponen dinamik saya memanggil <code>inject</code> dalam fungsi <code>setup</code> </p> <p>Walaupun ini tidak didokumenkan pada Vue, saya mencubanya tidak berjaya: </p> <pre class="brush:php;toolbar:false;"><component :is='MyComponent' v-bind='myProps' :provide='myProvidedProps'/></pre> <p>Malah cuba meletakkan <code>provide</code> objek ke dalam objek <code>props</code> </p>
P粉384366923
P粉384366923

membalas semua(1)
P粉122932466

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.

  1. 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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan