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


  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

_小刀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值