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

有时候组件并不是以Components注入的方式使用,而是使用构造函数,然后自己将实例挂载到dom树结构里,本贴记录这种方式下传递参数的方法。

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

by img MicroAnswer Create at:Aug 13, 2019 11:21:49 AM 

Tags: vue 组件传参 动态组件 构造函数

有时候组件并不是以Components注入的方式使用,而是使用构造函数,然后自己将实例挂载到dom树结构里,本贴记录这种方式下传递参数的方法。


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

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

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)