Question

这是我第一个合适的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>

我需要使用 props 吗？

感谢所有可以提供的帮助。

Answer 1

您必须将一个函数作为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>

VueJS：在子组件中触发事件时在父组件中运行功能

1 个答案: