Vue自定义插件及使用

本文转载自CSDN博主「刘运召」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Liu_yunzhao/article/details/103104339

开发插件

在项目中经常会用到Loading框、toast框、dialog框等，这些经常被用的组件我们也都会把它设定成全局组件，其实我们也可以用 自定义插件 的方式来实现。这里就用插件的方式来实现一个全局的dialog对话框来演示。

开发插件步骤

1. 创建一个 components 目录，并将每个组件放置在其各自的文件中，包括 .js、.vue
2. 在.js中导入.vue，使用基础 Vue 构造器，创建一个"子类",并添加原型方法
3. 在.js中创建"子类"实例，并挂载到元素上
4. 在.js中导出一个自定义对象，用于对外提供统一的方法
5. 在 components 根目录下新建index.js文件，并提供一个函数，并导出
6. 在提供的函数中添加原型方法
7. 在 main.js 中引入components 根目录下的 index.js，并通过Vue.use 注册全局插件

之所以步骤这么多，是为了让代码看起来更规范，更便于管理，以及main.js中的代码看起来更简洁。在通过代码实现之前，需要先了解一个概念，如Vue.extend、Vue.use等，这对理解代码很有帮助

Vue API介绍

Vue.extend( options )

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
这里options就可以是步骤2中导入的.vue文件
通过 Vue.extend 可以得到一个 “子类”，也可以说是一个构造器，通过构造器我们就可以创建 Vue 实例对象了

注意：在 Vue.extend(options) 中传入options组件选项对象内的data必须是函数

Vue.use( plugin )

安装 Vue.js 插件
如果插件是一个对象，必须提供 install 方法
如果插件是一个函数，它会被作为 install 方法

install 方法调用时，会将 Vue 作为参数传入

注意

• 该方法需要在调用 new Vue() 之前被调用
• 当 install 方法被同一个插件多次调用，插件将只会被安装一次
• 当插件是一个函数，函数名称可任意写，但建议写install

$el

Vue 实例使用的根 DOM 元素

el

只在用 new 创建实例时生效

el参数可以是 CSS 选择器，也可以是一个 HTMLElement 实例，
但传入的必须是在 index.html 页面 上已存在的 DOM 元素作为 Vue 实例的挂载目标。也就是说提供的 CSS 选择器在index.html页面上必须存在，或者提供的HTMLElement 实例要么在index.html页面已经存在如：document.getElementById(’#xxx’) 或 ‘#xxx’，要么就通过document.createElement(“xxx”)创建实例元素。

通过 new 创建 Vue 实例时如果没有收到 el 选项，则它处于 “未挂载” 状态，没有关联的 DOM 元素，也就是此时
Vue 实例没有 $el属性，元素也不可被访问（在实例挂载之后，元素才可以用vm.el属性，元素也不可被访问（在实例挂载之后，元素才可以用vm.el属性，元素也不可被访问（在实例挂载之后，元素才可以用vm.$el属性，此时el就是 Vue 实例使用的根 DOM 元素
也就是通过Vue.extend(options)传入的options对象，即包含组件选项的对象

elementOrSelector 参数和通过new 创建Vue实例是传入的el参数一样（两者选其一即可）。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，
但传入的必须是在 index.html页面 上已存在的 DOM 元素作为 Vue 实例的挂载目标。也就是说提供的 CSS 选择器在index.html页面上必须存在，或者提供的
HTMLElement 实例要么在index.html页面已经存在如：document.getElementById(’#xxx’) 或 ‘#xxx’，要么就通过document.createElement(“xxx”)创建实例元素。

直接提供已存在的DOM元素作为Vue实例的挂载目标
vm.KaTeX parse error: Expected 'EOF', got '#' at position 41: …ed 'EOF', got '#̲' at position 8…mount(document.createElement(‘div’))

在创建实例对象是直接传入el选项，作为Vue实例的挂载目标。如
const instance = new LoadingConstructor({
el: document.createElement(‘div’),
});

如果没有提供 elementOrSelector 参数，创建实例是也没有传入el选项，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中，如：
document.body.appendChild(instance.$el); 添加到body里

再次提示 el和elementOrSelector参数要求一致

开发插件代码示例

待续…