如何制作一个类似jquery插件的vue插件

Gemini 发布于2019-08-22 16:00 / 817人阅读

摘要：拿来写插件，会不会太那啥请跟我念，不会，符合业务需求才是你的老板最想要的。我们生产了一个实例后该如何操作请跟我来写一个实现。首先，我们先写一个组件。

vue拿来写插件，会不会太那啥？

请跟我念，“不会，符合业务需求才是你的老板最想要的。”

如何封装一个可以全局调用的vue插件

其原理其实相当简单，通过new Vue(vueComponentConstructor)您可以轻松的建立一个vue实例，在该实例上您可以操作方法、操作数据、监听数据变化，使用各种钩子，对开发者而言并没有任何阻碍。

我们生产了一个实例后该如何操作

请跟我来,写一个实现。首先，我们先写一个vue组件。

// vue组件 A.vue

当然，如果您的构建系统不支持vue-loader和webpack,您也可以使用以下写法

export default const Dialog = {
    name: "xxx",
    template: `
        
            // some template
        
    `,
    data () {
        return {}
    },
    methods: {}
}

第二步，生产api出口

// 生成调用方法
import Vue from "vue"
import A from "./A.vue"

let AConstructor = Vue.extend(A)

export default function (options = {}) {
  let instance = new AConstructor({
    data: options // 混入初始化数据，也可以直接通过merge的方式把数据插入实例对象上
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true // 一些生成后的data成员操作
  return instance.vm
}

您可以将其生成单一实例，也可以每次调用生成不同实例，在关闭时调用$destroy配合destroyed或者beforeDestroy对存在页面上的vm.$el进行销毁。

一些提示

您可以将实例引用挂载到任何您想挂载的地方方便调用，您也可以使用Promise配合vue实例里的自定义方法或者其他方法实现promise链或者async await的灵活写法。这都取决于您。

GPU云服务器云服务器 vue插件 jquery插件 jquery插件源码jquery 手写jQuery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93947.html

前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

FullStackDeveloper 2019-08-22 16:48 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

20171112 2019-08-29 15:12 评论0 收藏0
2月份前端资源分享

摘要：月份前端资源分享更多资源请文章转自前端生成好看的二维码十大经典排序算法带动图演示为什么知乎前端圈普遍认为游戏和展示的个人整理和封装的库中文详细注释供新手学习使用扩展语法记录掉坑初期工具汉字拼音转换工具实现汉字转拼音的插件下拉列表支持拼音简 2月份前端资源分享更多资源请Star：https://github.com/maidishike... 文章转自：https://github...

yanwei 2019-08-20 14:25 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0