如何在 Composition API (Vue3) 中编写事件？

Question

我目前正在 vue3 component:

中举办此活动

<template>
    <div class="hamburger-toggle" @click="toggle" :class="{ nav__open: isActive }">
</template>

<script>
export default {
  name: "navbar",
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    toggle: function () {
      this.isActive = !this.isActive;
    }
  }
}
</script>

我如何在 composition api 中写这个？

尝试失败：

<script>
export default {
  props: {
    isActive: false
  },
  setup(props) {
    function toggle(props) {
      props.isActive = !props.isActive;
    }
  }
}
</script>

Answer 1

像这样尝试（在组合 API 中，您使用 ref 或 reactive 代替数据函数，并且您 return 您的 functions/reactive 数据）：

<template>
    <div class="hamburger-toggle" @click="toggle" :class="{ nav__open: isActive }">
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  name: "navbar",
  setup() {
    const isActive = ref(true)
    const toggle = () => {
      isActive.value = !isActive.value
    }
  return { isActive, toggle }
}
</script>

Answer 2

此外，它将使用更少的代码：

<template>
  <div @click="isActive = !isActive"> ... </div>
</template>

<script setup>
import { ref } from "vue";
const isActive = ref(true)
</script>

您可以在此处阅读有关 <script setup>

的信息