Vue Vuetify 打开对话框组件 onclick

Posted 2023-02-23

【中文标题】Vue Vuetify 打开对话框组件 onclick

【英文标题】：Vue Vuetify open dialog component onclick

【发布时间】：2019-07-24 20:24:11

【问题描述】：

编辑：我知道为什么对话框没有打开。子组件未接收到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 调试器上看到事件总线？

【问题讨论】：

能否提供您的bus 代码

试试这个：bus.$on('openComment', () => this.commentDialog = true )

@Pvl 什么是bus 代码？这是 main.js 中简单的export const bus = new Vue()。 @radu，你的语法我的语法是一样的，所以结果是一样的。什么都不会触发。

好像你的事件触发了。但是对话本身的问题。不是吗？

@Pvl 我首先尝试了这个理论。我从 vuetify 复制了模态对话框模板来测试这个理论，但事实并非如此。

【参考方案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 

【讨论】：

这不会触发模态。如果我切换到 es6 胖箭头函数，那么我不必使用const self = this，因为这个上下文将在函数内部正确解析。无论如何，我尝试了你的理论，但这并没有触发模态。

我试过你的代码，如果能解决上下文问题，效果很好

我在回调中放入了一个console.log，它似乎永远不会被触发。也许这就是模式没有打开的原因。

你们使用同一个总线对象吗？

【参考方案2】：

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

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

【讨论】：

这根本不是 hackish。组件必须在 vue 的控制下才能接收事件。换一种方式想一想：如果你的组件不是模态的，vue place 应该在哪里显示它？组件本身没有关于此的信息。未附加到应用程序的组件，以某种方式在链中，未呈现。如果从未使用过，Webpack（或任何其他模块构建器）甚至可以从您的发行版中删除整个代码。