Vuejs 从组件发出点击到主 vue 实例答案

【问题标题】：Vuejs emit click from component to main vue instanceVuejs 从组件发出点击到主 vue 实例
【发布时间】：2018-05-28 12:31:47
【问题描述】：

我正在尝试从我的组件向我的主 vue 实例发出一个点击事件，但我能够解决它。目前我在控制台中没有收到任何消息，所以它没有事件去那个函数，所以到目前为止代码看起来像这样：

// component LeftUserListTileComponent
<template>
    <v-list-tile @click="$emit('toggleLeftUserPanel')">
        <v-list-tile-action>
            <v-icon>exit_to_app</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
            <v-list-tile-title>User Settings</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        methods:{
            toggleLeftUserPanel () {
                // what to do here?
            }
    };
</script>

Vue.component('left-user-list-tile', require('./components/LeftUserListTileComponent.vue'));
Vue.component('left-user-panel', require('./components/LeftUserPanelComponent.vue'));

const app = new Vue({
    el: '#app',

    props: {
      source: String
    },

    data: {
        leftUserPanel: null
    },

    toggleLeftUserPanel () {
        console.log("In toggleLeftUserPanel func");
        this.leftUserPanel != this.leftUserPanel;
    }


});

【问题讨论】：

你实际上在哪里监听发出的事件？
我正在尝试在@click 上单击后收听它...
请查看此内容以了解如何实际收听发出的值：vuejs.org/v2/guide/…
@Stephan-v 好的，我更改了代码，但是如何更改组件发出的 leftUserPanel 值？
您的问题解决了吗？有用？如果是，请将答案标记为有效，以便标记为已解决并保持 S.O 清洁。如果没有，请尝试更新问题，我们会尽力帮助您

标签： javascript vue.js

【解决方案1】：

如果您在单击时直接发出事件，则在第一个 toggleLeftUserPanel () 中您应该什么都不做。

为了工作，您应该在收到来自其子级的 toggleLeftUserPanel event 时声明您对 parent 元素的期望，例如：

<toggle-left-user-panel @toggleLeftUserPanel='togglePanel' />

然后在父级中定义这个方法在methods:

methods(){
    togglePanel() {
         //your action here
    }
}

这样就开启了父子通信，父母应该对子emit事件做出反应。

希望对你有帮助！

【讨论】：

【解决方案2】：

如果你想发出一个事件，你需要在你的组件中设置它。如果您只对在用户点击标题时获取点击感兴趣，您应该可以使用@click.native：

<v-list-tile @click.native="console.log('Title is clicked!')">
...

【讨论】：