使用 Vue @click 事件处理程序关闭我的模型不起作用答案

【问题标题】：Closing my model with Vue @click event handler not working使用 Vue @click 事件处理程序关闭我的模型不起作用
【发布时间】：2020-07-25 02:49:42
【问题描述】：

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

在我的单个文件按钮组件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>

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

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

当我再次按下按钮时，除了模式没有关闭之外，一切正常吗？

我在我的模板中尝试了以下内容：

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

但这不起作用？

【问题讨论】：

标签： vuejs2 click vue-component

【解决方案1】：

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

@click="onClick"

在脚本中：

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

【讨论】：

您调用 isOpen 作为处理程序，但这是一个 bool 属性。您应该在中使用类似 this.isOpen=true 的方式调用处理程序（例如 onClicked）
我修复了它并且它现在可以工作了。我更改了我的模板<hamburger-button @click="isOpen = !isOpen"></hamburger-button>，并从app.css 删除了methods: { onClicked() { this.isOpen = !this.isOpen } },。因此，因为我从我的组件发出事件onClick，我不必在创建新的Vue 实例的app.css 中再次添加它？我只是想了解它是如何工作的。谢谢
您将处理程序嵌入到模板中。这对于像 isOpen = !isOpen 这样的短处理程序很有用，但是如果您的处理程序更复杂，那么将代码提取到处理程序函数（如 onClicked）会更方便