时间戳

首页 > 解决方案 > 使用 Nuxt.js 将事件传递给父组件

vuejs2 - 使用 Nuxt.js 将事件传递给父组件

问题描述

我有一个简单的标题组件，其中包含一个可点击的汉堡包，我想将汉堡包分成一个单独的组件，但是当我这样做时点击事件不再起作用，我想我需要某种布尔道具但找不到解释或我正在寻找错误的东西。

这作为单个组件工作

/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>

标签： vuejs2clickvue-componentnuxt.jsvue-props

解决方案

将事件从子组件发送到父组件，并通过子组件中的道具关闭菜单。很容易实现，跟着

https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Nuxt 与事件无关。

编辑 我为你创建了一个例子

https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14

推荐阅读