如何制作一個類似jquery插件的vue插件

Gemini 發布于2019-08-22 16:00 / 818人閱讀

摘要：拿來寫插件，會不會太那啥請跟我念，不會，符合業務需求才是你的老板最想要的。我們生產了一個實例后該如何操作請跟我來寫一個實現。首先，我們先寫一個組件。

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插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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