我试图在单击按钮时传递一个函数,在子元素中单击该按钮,然后通过父元素传递给另一个子组件,我不想为此使用商店,我该怎么做?
组件/页脚/footer.vue
-- 这是点击按钮的地方
<template>
<div class="footer-bottom-header-menu-bar mob" @click="showMenu">
<img src="~/assets/svg/menubar.svg" alt="+" />
</div>
</template>
<script>
export default {
methods: {
showMenu() {
this.$emit("show-menu");
}
}
}
</script>
布局/default.vue--这是接收点击函数并将其传递给
app-header
的父组件<template>
<div>
<app-header />
<Nuxt />
<app-footer @show-menu="showMenu()"/>
</div>
</template>
<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";
export default {
components: {
'app-header': header,
'app-footer': footer
},
methods: {
showMenu() {
console.log("clicked");
}
}
}
</script>
组件/标题/header.vue-- 我想让 click 函数在这个组件内部执行一个 Action
<script>
export default {
data() {
return {
showMenuBar: false
}
},
}
</script>
最佳答案
你为什么担心传递一个函数?
当你emit
show-menu
事件只是在你的父组件中切换一条数据,如下所示:
<template>
<div>
<app-header :showMenuBar="showMenuBar" />
<Nuxt />
<app-footer @show-menu="showMenu"/>
</div>
</template>
<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";
export default {
components: {
'app-header': header,
'app-footer': footer
},
data() {
return {
showMenuBar: false;
};
},
methods: {
showMenu() {
// I would make this more dynamic than always
// hardcoding it to true, but you get the idea
this.showMenuBar = true;
}
}
}
</script>
然后在你的AppHeader
只需将其作为 Prop :<script>
export default {
props: {
showMenuBar: {
type: Boolean,
default: false,
},
}
</script>
关于javascript - Vue js在点击事件上将一个函数从子智利传递给另一个子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70225561/