Question

我的项目包含4个组件：标题，内容，页脚，主页。所有这些都是.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 - ＆gt;在Main中捕获它 - ＆gt;并将子prop'property'设置为数据memeber'mainData'。我该怎么处理这段代码？

Answer 1

您必须通过在模板代码中添加指令headerButtonClick来捕获v-on事件。没有关于“pug”语言的线索，但它应该看起来像：

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

捕获该事件后，您可以以任何方式更改property var。根据Vue的文档（https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props），父母和孩子之间的沟通应该通过以下方式完成：

儿童向父母发送活动
父母抓住了这个事件，做了一些事情
父设置道具

因此，父母使用道具和孩子使用事件与其子女进行交流。

Answer 2

您正在从标题组件中发出headerButtonClick事件，只需将其捕获到您的主要组件上：

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

从本地子vue组件捕获事件

2 个答案: