Esta es mi plantilla para "Guess":
<template> <div :name="label"> Kevin was here:{{ value }} </div> </template>Pero el HTML producido se parece a esta salida real:
<div label="guess-0" value="Kevin"> Kevin was here:</div>Rendimiento esperado:
<div label="guess-0"> Kevin was here: Kevin</div>Así es como estoy usando la plantilla:
data: () => ({ guesses: [ "Kevin", "Apple", "", "", "", "", ] }), <Guess v-for="(guess, i) in guesses" :key="`guess-${i}`" :label="`guess-${i}`" :value="guess" />Un comentarista me preguntó si había registrado el componente Guess. No había. Gracias.
Esto lo arregló:
<script lang='ts'> import { defineComponent } from 'vue'; export default defineComponent({ props: { label: { type: String, }, value: { type: String, }, }, }); </script>En el uso de su componente, inyectó dependencias muy bien como se muestra a continuación
<Guess v-for="(guess, i) in guesses" :key="`guess-${i}`" :label="`guess-${i}`" :value="guess" />luego, dentro de este componente, ¿cómo recoges estas dependencias para que puedas usarlas? ... como has adivinado, necesitas accesorios
<template> <div :name="label"> Kevin was here:{{ value }} </div> </template> <script> export default { props: { label: { type: String, }, value: { type: String, }, }, } </script>