I am currently working on an App.vue file that has a property called "clicked" which I am trying to pass to different child components.
App.vue
<template>
<NavBar :clicked="clicked"/>
<BackDrop :clicked="clicked"/>
<SideDrawer :clicked="clicked" />
<router-view></router-view>
</template>
<script>
import { ref } from "vue";
import NavBar from "./components/Navbar/NavBar.vue";
import BackDrop from "./components/Backdrop/BackDrop.vue";
import SideDrawer from "./components/Sidedrawer/SideDrawer.vue";
export default {
name: "App",
components: { NavBar, BackDrop, SideDrawer },
setup() {
const clicked = ref(false);
return { clicked };
},
};
</script>
export default App;
The child components can now be rendered conditionally like so:
SideDrawer.vue
<template v-if="clicked">
<div class="sidedrawer"></div>
</template>
<script setup>
</script>
Have I correctly passed the "clicked" ref in the "App.vue" file?
If yes, how do you access these props in the child component? I have researched online and seen various posts on StackOverflow that mention using "defineProps()", but most of them are for Typescript as shown in this code snippet:
const props = defineProps({
msg: String,
user: Object,
});
// Destructuring props
let { name, lastname } = props.user;
</script>
However, since I am not using Typescript, this method won't work for me. What is the alternative way of passing props without relying on Typescript?
EDIT:
Even when I tried implementing Typescript and used the following code:
SideDraw.vue
<template v-if="clicked">
<div class="sidedrawer">
<h1>{{ props.clicked }}</h1>
</div>
</template>
<script setup>
const props = defineProps({
clicked: boolean,
});
</script>
I encountered errors:
'defineProps' is not defined.eslintno-undef
'boolean' is not defined.eslintno-undef
...
After referring to a Github thread here, I attempted setting global variables as suggested, but it did not resolve the issue.
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
globals: {
defineProps,
defineEmits,
defineExpose,
withDefaults
}
}
}