如何在Vue3 Composition API中编写事件？以导航栏点击切换功能实现为例

你之前的写法存在以下问题： #

• 错误将原本组件内部的私有响应式状态isActive定义为props，props是父组件传递的只读属性，不允许在子组件内部直接修改
• 没有为isActive添加响应式包装，Composition API中需要用ref/reactive定义响应式状态才能触发视图更新
• 没有在setup函数中返回需要给模板使用的状态和方法，模板无法识别对应变量
• toggle函数内部重复声明了props形参，会覆盖上层作用域的props变量，即使使用props传值也会逻辑异常

正确实现写法 #

写法1：标准setup选项写法（和你原有代码结构兼容） #

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

<script>
import { ref } from 'vue'
export default {
  name: "navbar",
  setup() {
    // 定义响应式状态，初始值和原Options API保持一致
    const isActive = ref(true)
    // 切换方法：ref包裹的变量在JS中修改需要访问.value属性，模板会自动解包不需要加.value
    const toggle = () => {
      isActive.value = !isActive.value
    }
    // 将需要在模板中使用的变量和方法return出去
    return {
      isActive,
      toggle
    }
  }
}
</script>

写法2：