JS 操作vue单文件组件

在使用.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对象搞透了，就想怎么玩就怎么玩了。