Передача события родительскому компоненту с помощью Nuxt.JS

Передача события родительскому компоненту с помощью Nuxt.JS

14.09.2019 04:58:04 Просмотров 73 Источник

У меня есть простой компонент заголовка, который содержит кликабельный гамбургер, я хочу разделить гамбургер на отдельный компонент, но событие 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

Является ответом!
rohitpal

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

https://stackoverflow.com/questions/57931915/passing-an-event-to-a-parent-component-with-nuxt-js/57932128#comment102281583_57932128
Спасибо за ответ, который я прочитал в документах и попробовал следующее без радости до сих пор, но все еще отрываясь от него. / компоненты / заголовок.vue <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>
https://stackoverflow.com/questions/57931915/passing-an-event-to-a-parent-component-with-nuxt-js/57932128#comment102281591_57932128
компоненты/гамбургер.вю <template> <button class="hamburger" v-on:click="$emit('menuClick')"> </button> </template> <script> export default { props: { menuClick: Boolean } }; </script>
https://stackoverflow.com/questions/57931915/passing-an-event-to-a-parent-component-with-nuxt-js/57932128#comment102281652_57932128
Также пробовал /компоненты/гамбургер.вю <template> <button class="hamburger" v-on:click="$emit('menuClick')"> </button> </template> <script> export default { props: ["menuClick"], }; </script>
https://stackoverflow.com/questions/57931915/passing-an-event-to-a-parent-component-with-nuxt-js/57932128#comment102283723_57932128
Я добавил пример, пожалуйста, проверьте.
https://stackoverflow.com/questions/57931915/passing-an-event-to-a-parent-component-with-nuxt-js/57932128#comment102286579_57932128
Спасибо за это я потратил несколько часов на чтение документов и пробовал несколько вещей и был очень близок к тому же решению но ваш пример действительно полезен
Помочь в развитии проекта:
Закрыть X