从本地子 vue 组件捕获事件

Question

我的项目包含 4 个组件：Header、Content、Footer、Main。所有这些都分离为 .vue 文件。 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>

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>

更新： 使用此代码，我设法正确呈现页面。现在我想从 Header 发出事件 buttonClick -> 在 Main -> 中捕获它，并将子 prop 'property' 设置为 data memeber 'mainData'。我该如何处理这段代码？

Answer 1

您正在从您的 Header 组件中发出 headerButtonClick 事件，只需在您的主组件上捕获它：

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

Answer 2

您必须通过将指令v-on 放入模板代码中来捕获headerButtonClick 事件。 对“哈巴狗”语言一无所知，但它应该类似于：

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

捕获该事件后，您可以以任何方式更改 property 变量。根据 Vue 的文档 (https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props)，父子之间的通信应该通过：

1. 子级向父级发出事件
2. 家长发现事件，做某事
3. 父母设置道具

因此，父级使用道具与子级通信，而子级使用事件。