Vue.js Vue Vuetify打开对话框组件onclick

编辑：我弄明白了为什么对话框没有打开。子组件未接收到

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>

添加评论
从“../main”导入{bus}
导出默认值{
名称：“CommentModal”，
数据（）{
返回{
注释对话框：false
}
},
创建（）{
总线。$on（'openComment'，函数（）{
this.commentDialog=true
})
},
}

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

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

函数上下文的问题

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

或

这个问题的附加问题和后续问题是如何在vue chrome调试器上查看事件总线

我解决了这个问题。似乎我必须调用工具栏组件vue文件中的某个组件。因此我将其称为`这使CommentModal组件能够对发送的事件做出反应。如果未在同级组件中的任何位置调用该组件，则它不会对任何事件作出反应

但我很想知道是否有更好的解决办法。我觉得有点不舒服
 你能提供你的
bus
code试试这个：bus.$on（'openComment'，（）=>{this.commentDialog=true}）@Pvl什么是
bus
code？这是main.js中简单的导出const bus=new Vue（）

@拉杜，你的语法我的语法是一样的，所以结果是一样的。没有触发任何事件。似乎是您触发了事件。但对话本身存在问题。是吗？@Pvl我先尝试过这个理论。我从vuetify复制了模态对话框模板来测试这个理论，但看起来不是这样，这不会触发模态。如果我切换到es6 fat arrow函数，那么我就不必使用

const self=this

，因为this上下文将在函数内部正确解析。不管怎样，我尝试了你的理论，但这并没有触发模式。我尝试了你的代码，如果解决上下文问题，我把console.log放在回调中，效果很好，而且似乎永远不会触发。也许这就是模态没有打开的原因。你使用的是同一个总线对象吗？这一点都不粗俗。组件必须在vue的控制下才能接收事件。换一种方式考虑：如果您的组件不是模态，那么vue place应该在哪里显示它？组件本身中没有关于这方面的信息。一个未连接到应用程序的组件，在链中的某些部分，它不会被渲染。Webpack（或任何其他模块生成器）甚至可以从您的发行版中删除从未使用过的全部代码。

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

import Vue from 'vue'

const bus = new Vue()

window.__myBus = bus

export { bus }