在 Vue 中手动实例化组件

Question

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

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

这个实例化是通过 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 的弹出窗口，我认为这是您想要实现的目标。

希望这会有所帮助！