Vue newbie here. I'm trying to pass some props from parent to child, but I get the "variable is assigned a value but never used".
Parent:
<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>
Child:
<template>
<h1>{{ heading }}</h1>
<p>{{ body }}</p>
</template>
<script>
export default {
name: 'TextBox',
props: {
heading: String,
body: String,
}
}
</script>
What am I missing? Thank you!
If you are using composition API setup function you need to return, or you can use data function from options API :
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>