Vue novato aquí. Estoy tratando de pasar algunos accesorios de padre a hijo, pero obtengo el mensaje "a la variable se le asigna un valor pero nunca se usa".
Padre:
<template> <TextBox :heading="heading1" :body="body1" /> </template> <script> import TextBox from "./components/TextBox.vue"; import { ref } from "vue"; export default { name: "App", components: { TextBox, }, setup() { const heading1 = ref("Primo titolo"); const body1 = ref("Primo corpo del testo"); }, }; </script>Niño:
<template> <h1>{{ heading }}</h1> <p>{{ body }}</p> </template> <script> export default { name: 'TextBox', props: { heading: String, body: String, } } </script>¿Qué me estoy perdiendo? ¡Gracias!
Si está utilizando la función de setup la API de composición, debe regresar, o puede usar la función de data de la API de opciones:
const { ref } = Vue const app = Vue.createApp({ setup() { const heading1 = ref("Primo titolo"); const body1 = ref("Primo corpo del testo"); return { heading1, body1 } }, }) app.component('TextBox', { template: ` <h1>{{ heading }}</h1> <p>{{ body }}</p> `, props: { heading: String, body: String, } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <text-box :heading="heading1" :body="body1" /> </div>