【Vue】记录如何为构造函数式组件传参

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

本文更新可能不及时，原文地址: 【Vue】记录如何为构造函数式组件传参。

Vue单文件组件为我们开发和维护上都带来了极大的方便，但有时候也有这样一种场景：要用这个组件了，可这个组件要用的地方并不是另一个vue文件里，而或许是一个工具类里、这之类的地方。这种时候，就没有办法再像原来那样使用组件了。我们必须通过构造函数的方式来使用这个组件。

本知识点要感谢网友 学习交流(文档 的分享。

一、建立组件的构造函数

现有一个组件 mdialog.vue， 建立这个组件的构造函数须使用 Vue.extend 方法：

// 导入组件。
import MDialog from './mdialog.vue';

// 建立构造函数。
let MDialog_Constructor = Vue.extend(MDialog);

这时，我们就得到了这个组件的构造函数，可以直接 new 这个函数，就拿到了一个组件实例对象了。

二、创建实例并传递参数

当我们的构造函数准备好以后，就可以使用它来创建组件实例了。现在，我们要创建一个弹出内容“Hello Dialog.”的弹出框，则我们可以通过这样的方式：

// 实例化组件
let mdialogObj = new MDialog_Constructor({
    propsData: {
        msg: "Hello Dialog."
    }
});

// 建立虚拟dom
mdialogObj.$mount();

// 添加到dom树结构(显示到界面)
document.body.append(mdialogObj.$el);

这样一来，就完成了使用构造函数创建组件，并完成了参数传递。要了解更多详情，可参考：Vue文档-propsData。

三、更多选项

在使用 new 建立组件实例时，除了 propsData 参数可以指定外，还可以指定 el 参数，它可以直接使用css选择器，或者一个dom，这样就可以直接调用实例的 $mount()方法直接挂载到指定的位置。参考Vue文档-el。