脚本宝典收集整理的这篇文章主要介绍了如何制作一个类似jquery插件的vue插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

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

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

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

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

// vue组件 A.vue <template>   <el-diaLOG tITle="选择文件夹" :visible.sync="visible" @close="close">     <div class="dirtree">       <el-tree         :PRops="dirtree"         :load="loadDir"         :render-content="refresh"         :expand-on-click-node="false"         @node-click="selectDir"         lazy       >       </el-tree>     </div>     <el-button tyPE="success" @click="ensureSelectedDir">确定</el-button>     <el-button @click="cancelSelectedDir">取消</el-button>   </el-dialog> </template>  <script> import api From '@/api' export default {   data () {     return {       dirtree: {         label: function (data, node) {           return data.name         },         data: null,         isLeaf: true       },       visible: false,       selectedDir: ''     }   },   methods: {     close () {         this.$nextTick(() => {           // 关闭时销毁元素           this.$destroy(true)           this.$el.parentNode.removeChild(this.$el)         })     },     ensureSelectedDir () {     },      cancelSelectedDir () {     },      selectDir (data) {     },      refreshDirData ($event, ctx) {     },      loadDir (node, resolve) {     },      refresh (h, ctx) {     }   } } </script>

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

export default const Dialog = {     name: 'xxx',     template: `         <div>             // some template         </div>     `,     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的灵活写法。这都取决于您。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的如何制作一个类似jquery插件的vue插件全部内容，希望文章能够帮你解决如何制作一个类似jquery插件的vue插件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。