![](/img/trans.png)
[英]onClick event of child component is not getting triggered for stacked parent and child component
[英]VueJS: Run function in parent component when event triggered in child component
这是我第一个合适的Vue JS项目...我已经搜索了Stack O,但找不到任何能解决我的问题的东西,但是如果已经提出要求,我深表歉意。
问题
我有两个组件,父组件是页面布局,子组件是该页面的模块。 当有人单击子组件中的按钮时,我想在父组件中触发一个功能。
根据VueJS开发工具,该过程的$ emit部分可以正确触发,但是父级中的函数不会触发。
我要去哪里错了?
这是我讨厌的代码(我删除了与该问题无关的所有内容)...
父组件
<template>
<div :toggle-nav="showHideNav" :class="navState">
<div class="wrapper">
<layout-toolbar></layout-toolbar>
</div>
</div>
</template>
<script>
import layoutToolbar from '~/components/layout/toolbar.vue'
export default {
components: {
layoutToolbar,
},
data: function() {
return {
navState: 'menu-closed'
}
},
methods: {
showHideNav: function(event) {
if (this.navState == 'menu-closed') {
this.navState = 'menu-open'
} else {
this.navState = 'menu-closed'
}
}
}
}
</script>
子组件
<template>
<div class="toolbar" role="navigation">
<div class="tools" role="group">
<button
class="button-icon"
aria-label="Open Navigation"
@click="$emit('toggle-nav')">
<i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
<span class="sr-only">Open Navigation</span>
</button>
</div>
</div>
</template>
我需要使用道具吗?
感谢任何可以提供的帮助。
您必须传递一个函数作为prop,然后从子组件中发出该函数。 所以您的父模板看起来像这样。
<template>
<div :toggle-nav="showHideNav" :class="navState">
<div class="wrapper">
<layout-toolbar @showHideNav="showHideNav"></layout-toolbar>
</div>
</div>
</template>
你的孩子模板看起来像这样
<template>
<div class="toolbar" role="navigation">
<div class="tools" role="group">
<button
class="button-icon"
aria-label="Open Navigation"
@click="$emit('showHideNav',<pass-your-event-or-data>)">
<i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
<span class="sr-only">Open Navigation</span>
</button>
</div>
</div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.