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对象搞透了,就想怎么玩就怎么玩了。


©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页