在使用.vue这种单文件组件开发的时候,一般情况是不需要用js来才处理组件的创建、实例化等操作的。
然而也有特殊情况需要用的,比如类似element-ui的Message组件,通过一个JS函数就能启动一个弹窗,是不是很high?
首先,我们来认识认识.vue文件
当我们使用import引入一个.vue文件的时候,引入的到底是什么?其实在经过vue-loader的编译之后,他就是一个componentOptions,记录了这个组件的data、prop、computed等等vue对象的配置项。
然后,看一个示例代码
function vueFactory (component, parent) {
const constructor = Vue.extend(component)
let ins = new constructor({
el: window.document.createElement('div'),
parent: parent
})
window.document.body.appendChild(ins.$el)
}
参数component就是import引入的.vue文件,首先通过Vue.extend()创建一个构造器,然后在new constructor()创建对象,在创建对象的时候需要指定el,否则实例ins就没有挂载HTML元素,无法添加到页面上。
parent是这个组件的父组件,当我们使用vuex这样的插件时,store一般是绑定在根节点上的,此时,如果我们创建的vue对象需要访问store,就可以通过继承父组件的store来实现,当然要使用store也可以直接将store添加到这个vue对象。
最后,此文只是随手一记,要真正玩转vue,最好还是去看看源码,把vue对象搞透了,就想怎么玩就怎么玩了。