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组件能够响应已发送的事件。如果在同级组件中的任何地方都没有调用该组件，则它不会对任何事件做出反应。

但是我很想听听是否有更好的解决方案。我觉得有点不客气。

Vue Vuetify打开对话框组件onclick

2 个答案: