Question

我想要一个仅由JavaScript调用的全局对话框组件。而且从来没有自定义内容。因此，我不想在代码中放入任何<my-dialog ref="myDialog"></my-dialog>这样的HTML标记。只需致电this.$ref.myDialog.show()。

我有一个HTML标签版本。如何仅在JavaScript中实例化组件？

Answer 1

首先，您需要将Vue分配给window.vue。

window.vue = new Vue({ // options })

然后使用js调用它。 vue.$ref.myDialog.show()

Answer 2

我认为您需要创建一个内部包含组件的JS窗口

这是一个示例：

var componentName = "my-dialog";
var model = {d:1};
var d = document.createElement("div"); // JavaScript Window
document.body.appendChild(d);
d.id = 'win' + componentName;
var app = new Vue({
    render(h, data) {
        return h(componentName, { on: { 'close': this.close }, props: { model: this.model } });
    },
    el: d, data: { wait: false, error: "", after: 0, model },
    mounted() {

    },
    methods: {
        close() { 
            this.$destroy();
            $(d).remove(); // remove the window by jQuery


        }
    }
})

如何在Vue中调用没有HTML标签的全局组件？

2 个答案: