My project is composed of 4 components: Header, Content, Footer, Main. Each of these components are separated into individual .vue files. Here is the code for Main.vue:
<template lang="pug">
.maincomponent
header
content
footer
</template>
<script>
import Header from '@/components/Header'
import Content from '@/components/Content'
import Footer from '@/components/Footer'
export default {
name: 'Main',
created: function () {
console.log('Main component created')
},
components: {
'header': Header,
'content': Content,
'footer': Footer
},
data () => {
return {
mainData: false
}
}
}
</script>
<style>
</style>
Here is the code for Header.vue:
<template lang="pug">
.header {{property}}
button(@click='buttonClick') Button
</template>
<script>
export default {
name: 'Header',
props: {
property: {
type: Boolean,
default: false
}
},
methods: {
buttonClick: function () {
this.$emit('headerButtonClick')
}
}
}
</script>
<style>
</style>
Update: I have successfully rendered the page with this code. Now I want to emit the event buttonClick from Header -> catch it in Main -> and set the child prop 'property' to the data member 'mainData'. How can I achieve this with the current code?