从我的硬编码按钮创建Vue按钮组件

Question

在我的模板中，我有一个按钮：

<button @click="isOpen = !isOpen">Button</button>

我想创建一个文件组件HamburgerButton.vue。这是我到目前为止的内容：

<template>
  <button @click="isOpen = !isOpen"
>
    <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
      }
    }
  }
</script>

当我单击按钮时，它正在正确更改SVG图标，但未打开我的模态？

我模板中的注册按钮：

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

我的模式HTML：

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

我必须如何从单个文件组件传递正确的数据或道具才能使它正常工作？

Answer 1

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

@click="onClick"

在脚本中：

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