Question

我开始将“某些” Vue集成到正在工作的网站中，在这种情况下，我有一个对话框作为组件列出文件。通过单击文件旁边的“删除”图标，将弹出一个新对话框，使用该对话框可以确认是否删除该文件。

构建的方式是，我有一个根组件，它有一个子“ dialogListFiles”（默认情况下是隐藏的，当用户执行特定操作时才可见），它本身以编程方式创建了一个新的“当用户要删除文件时，选择“ contextConfirmDeletion”。

此实例化是通过dialogListFiles中的方法完成的：

deleteFile: function(fileInfo) {
    var DialogDeleteClass = Vue.extend(clDialogDeleteFile);
    var delDialog = new DialogDeleteClass({
        propsData: { 'fileInfo': fileInfo}
    });
    delDialog.$mount('#mountingPoint');
    this.visible = false;
}

#mountingPoint是dialogListFiles模板中的一个

使删除确认对话框弹出可以正常工作。但是：

我无法使 $ emit 正常工作：如果我以dialogConfirmDeletion方法调用 $ emit ，那么我就无法在任何地方捕获此事件
我已经读过here，“从使用角度出发，不建议手动将其安装在另一个组件的DOM中”，所以我想知道我在做什么是否完全错误，并且是否是，正确的设计应该是什么？

Answer 1

我认为您应该只使用confirm(msg)方法，就像这样：

if(confirm('Are you sure you want to delete this item?')) { this.visible = false; }

这将弹出一个弹出窗口，如果用户接受，则返回true，我认为这是您要实现的目标。

希望这会有所帮助！

在Vue中手动实例化组件

1 个答案: