我有一个简单的标题组件，其中包含一个可点击的汉堡包，我想将汉堡包分成一个单独的组件，但是当我这样做时点击事件不再起作用，我想我需要某种布尔道具但找不到解释或我正在寻找错误的东西。
这作为单个组件工作
/components/Header.vue
<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
<button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
<span></span>
<span></span>
<span></span>
</button>
</div>
</template>
<script>
export default {
data() {
return {
menuClose: false,
};
}
};
</script>
当分成两个组件时，下面的内容不起作用，因为我被卡住了。
/components/Header.vue
<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
<Hamburger/>
</div>
</template>
<script>
import Hamburger from "~/components/Hamburger.vue";
export default {
components: {
Hamburger
}
}
};
</script>
/components/汉堡包.vue
<template>
<button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
<span></span>
<span></span>
<span></span>
</button>
</template>
<script>
export default {
data() {
return {
menuClose: false
};
}
};
</script>