Передача события родительскому компоненту с помощью Nuxt.JS
У меня есть простой компонент заголовка, который содержит кликабельный гамбургер, я хочу разделить гамбургер на отдельный компонент, но событие click больше не работает, когда я это делаю, я думаю, что мне нужна какая-то логическая опора, но не могу найти объяснение, или я ищу неправильную вещь.
Это работает как один компонент
/ компоненты / заголовок.вю
<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>
Ниже не работает как событие щелчка при разделении на два компонента, где я застрял.
/ компоненты / заголовок.вю
<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
<Hamburger/>
</div>
</template>
<script>
import Hamburger from "~/components/Hamburger.vue";
export default {
components: {
Hamburger
}
}
};
</script>
/ компоненты / гамбургер.вю
<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>
Ответы - Передача события родительскому компоненту с помощью Nuxt.JS / Passing an event to a parent component with Nuxt.js

14.09.2019 06:01:58
Отправить событие из дочернего компонента в родительский и сделать menuClose через prop в дочернем. Это очень легко реализовать, следуйте
https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
Nuxt не имеет никакого отношения к событиям.
Править Я создал пример для вас
https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14

<template> <div class="--row header__wrapper" :class="{active: menuClose}" v-on:menuClick="menuClose=!menuClose" > <header class="--row header"> <Hamburger/> </header> </div> </template> <script> import Hamburger from "~/components/Hamburger.vue"; export default { components: { Hamburger }, data() { return { menuClose: false } } } </script>

<template> <button class="hamburger" v-on:click="$emit('menuClick')"> </button> </template> <script> export default { props: { menuClick: Boolean } }; </script>

<template> <button class="hamburger" v-on:click="$emit('menuClick')"> </button> </template> <script> export default { props: ["menuClick"], }; </script>

