无法将点击事件从按钮组件传递到实际按钮

Question

我在App.vue中通过Vue Mixin创建了一个全局变量

Vue.mixin({
  data: function() {
    return {
      isCompany: true
    }
  }
})

现在，我试图通过单击如下所示的<Button>组件来切换此全局变量的状态：

<template>
  <button @click="event" :class="['button', 'size-'+size, 'color-'+color, isRounded ? 'type-rounded' : '', isIconOnly ? 'type-icon-only' : '']">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    name: "Button",
    props: {
      color: {
        default: "blue",
        type: String
      },
      size: {
        default: "lg",
        type: String
      },
      isRounded: {
        default: false,
        type: Boolean
      },
      isIconOnly: {
        default: false,
        type: Boolean
      },
      event: {
        default: null
      }
    },
  };
</script>

我正在另一个文件中使用该组件：

<Button :event="isCompany = !isCompany">Toggle</Button>

问题是：我总是会遇到这种错误：

任何人都知道问题可能在哪里，以及我如何轻松解决此问题？

Answer 1

好吧，没关系，我找到了答案。那个对我有用：

https://stackoverflow.com/a/56391350/9024437