从本地子 vue 组件捕获事件

Question

My project contains 4 components: Header, Content, Footer, Main. All of them separeted to .vue files. Main.vue file:

<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>

Header.vue code:

<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>

Updated: With this code I manage to render page properly. Now I want to emit event buttonClick from Header -> catch it in Main -> and set child prop 'property' to data memeber 'mainData'. How can I do with this code?

Answer 1

You'll have to catch the headerButtonClick event by putting the directive v-on in your template code. Don't have a clue about "pug" language, but it should look something like:

.maincomponent
header (v-on:headerButtonClick="name-of-your-main's-method")
content
footer

After catching that event, you could change the property var in any ways. According to Vue's documentation ( https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props ), communication between parent and child should be done by:

1. Child emits an event to parent
2. Parent catches the event, does something
3. Parent sets a prop

So, the parent communicates with its child using props and the child using events.

Answer 2

Your are emitting headerButtonClick event from your Header Component, Just Catch it on your main component:

<template lang="pug">
.maincomponent
  header(@headerbuttonclick='functionToExecute')
  content
  footer
</template>