VueJS：在子组件中触发事件时在父组件中运行函数

Posted 2023-02-22

【中文标题】VueJS：在子组件中触发事件时在父组件中运行函数

【英文标题】：VueJS: Run function in parent component when event triggered in child component

【发布时间】：2019-05-05 19:45:01

【问题描述】：

这是我的第一个合适的 Vue JS 项目...我搜索了 Stack O 并找不到任何专门解决我的问题的内容，但如果已经有人问过这个问题，我深表歉意。

问题

我有两个组件，父级是页面布局，而子级是该页面的模块。当有人点击子组件中的按钮时，我想在父组件中触发一个函数。

进程的 $emit 部分根据 VueJS 开发工具正确触发，但父级中的函数没有触发。

我哪里错了？

这是我的缩写代码（我已经删除了与问题无关的任何内容）...

父组件

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

我需要使用道具吗？

感谢您提供的任何帮助。

【参考方案1】：

您必须将函数作为道具传递，然后从子组件中发出该函数。所以你的父模板看起来像这样。

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