使用Vue事件处理程序关闭模型无效

Question

我希望用户单击按钮时打开和关闭模式。为了组织代码，我使用单个文件组件。

在我的单个文件按钮组件HamburgerButton.vue中，我有：

<template>
  <button @click.prevent="onClick"
>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path v-if="isOpen" d="M10"/>
      <path v-if="!isOpen" d="M0"/>
    </svg>
  </button>
</template>

<script>
  export default {
    data() {
      return {
        isOpen: false
      }
    },
    methods: {
     onClick (evt) {
      this.isOpen = !this.isOpen
      this.$emit('click', evt) 
      component
     }
    }
  }
</script>

我模板中的注册按钮：

<hamburger-button @click="onClicked"></hamburger-button>

我的模式HTML：

<div :class="isOpen ? 'block' : 'hidden'" class="static">
 <!--Modal-->
</div>

在具有我的Vue实例的app.js中，我有：

new Vue({
  el: '#menu',
  data: {
    isOpen: false,
  },
  methods: {
   onClicked() {
    this.isOpen = true;
   }
  },
  components: {
    HamburgerButton,
  }
})

除了再次按下按钮时模态没有关闭以外，其他所有操作都正常吗？

Answer 1

您应将click事件传递给HamburgerButton的父组件。像这样的东西：

@click="onClick"

在脚本中：

...
methods: {
  onClick (evt) {
    this.isOpen = !this.isOpen
    this.$emit('click', evt) // <--- passing the event to a parent component
  }
}