Vue Vuetify 打开对话框组件 onclick

Question

编辑：我知道为什么对话框没有打开。子组件未接收到openComment 事件。我签入了根组件，并且正确接收了事件。关于为什么兄弟组件没有收到事件的任何建议？也可能是因为我没有在任何东西中使用该组件，而是因为它本身就是模态，我真的不想将它导入任何其他vue 文件。

我正在尝试找出一种从我的工具栏打开模式对话框的方法。工具栏位于一个组件文件中，对话框位于另一个组件文件中。我正在尝试使用事件来实现这一点，但我似乎无法触发它。我尝试过的是发送一个自定义，即使它应该看到将对话框的 vmodel 设置为 true。我正在使用 Vuetify 来创建对话框。

我的对话框组件文件是：

<template>
<v-dialog persistent
    v-model="commentDialog"
    transition="dialog-transition">
    <v-card>
    <v-card-title primary-title>
        Add a comment
    </v-card-title>
    <v-card-text>
        <v-flex xs12 sm6 md4>
        <v-text-field label="Legal first name*" required></v-text-field>
        </v-flex>
    </v-card-text>
    </v-card>
</v-dialog>
</template>

<script>
import { bus } from '../main'
export default {
name: 'CommentModal',
data() {
    return {
    commentDialog: false
    }
},
created() {
    bus.$on('openComment', function () {
    this.commentDialog = true
    })
},
}
</script>

<style>

</style>

工具栏组件包括以下内容：

<template>
<v-btn fab small
    @click="commentThis($event)"
    <v-icon>fas fa-comment</v-icon>
</v-btn>
</template>

<script>
commentThis: function (e) {
    bus.$emit('openComment')
}
</script>

这个问题的奖励和后续问题是我如何在 vue chrome 调试器上看到事件总线？

Answer 1

函数上下文的问题

created() {
    const self = this
    bus.$on('openComment', function () {
    self.commentDialog = true
    })
},

或

bus.$on('openComment', () => (this.commentDialog = true))

这个问题的奖励和后续问题是我如何在 vue chrome 调试器上看到事件总线？

import Vue from 'vue'

const bus = new Vue()

window.__myBus = bus

export { bus }

Answer 2

我解决了这个问题。似乎我不得不在我的工具栏组件 vue 文件中的某处调用该组件。所以我把它称为`，这使得 CommentModal 组件能够对发送的事件做出反应。如果该组件没有在兄弟组件中的任何位置被调用，那么它不会对任何事件做出反应。

但我很想知道是否有更好的解决方案。我觉得有点hacky。