Tratando de aprender los conceptos básicos, obtuve una matriz en el componente principal (App.vue)
data() { return { fruits: [ "apple", "pear", "cherry" ], }; },Quiero poder tener el mismo componente 3 veces para cada fruta.
<Fruit v-for="(fruit, index) in fruits" :key="index"/>Y esta es la función de accesorios del componente Fruit.vue (el componente secundario)
props: { fruits: {type: Array, required: false}, }¿Cómo debo escribir el código para que muestre cada fruta en su componente "propio" en la etiqueta de Fruit.vue?
Desea tener un componente de fruta que acepte solo una cadena de la matriz.
Componente de fruta
<template> <div class="fruit"> {{ props.fruit }} </div> </template> <script lang="ts" export default defineComponent({ props: { fruit: { type: String, required: true } } setup(props) { return { props } } } </script>dentro de app.vue
<Fruit v-for="fruit in fruits" :key="fruit" :fruit="fruit"/>