使用 Nuxt.js 将事件传递给 parent 组件
Passing an event to a parent component with Nuxt.js
我有一个简单的 header 组件,其中包含一个可点击的汉堡包,我想将汉堡包分成一个单独的组件,但是当我这样做时点击事件不再有效,我想我需要某种布尔属性但找不到解释或者我正在寻找错误的东西。
这作为一个组件工作
/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/Hamburger.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>
将事件从子组件发送到父组件,并通过子组件中的属性关闭菜单。
很容易实现,关注
https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
Nuxt 与事件无关
编辑
我已经为你创建了一个例子
https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14
我有一个简单的 header 组件,其中包含一个可点击的汉堡包,我想将汉堡包分成一个单独的组件,但是当我这样做时点击事件不再有效,我想我需要某种布尔属性但找不到解释或者我正在寻找错误的东西。
这作为一个组件工作
/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/Hamburger.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>
将事件从子组件发送到父组件,并通过子组件中的属性关闭菜单。 很容易实现,关注
https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
Nuxt 与事件无关
编辑 我已经为你创建了一个例子
https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14