开发插件
在项目中经常会用到Loading框、toast框、dialog框等,这些经常被用的组件我们也都会把它设定成全局组件,其实我们也可以用 自定义插件 的方式来实现。这里就用插件的方式来实现一个全局的dialog对话框来演示。
开发插件步骤
- 创建一个 components 目录,并将每个组件放置在其各自的文件中,包括 .js、.vue
- 在.js中导入.vue,使用基础 Vue 构造器,创建一个"子类",并添加原型方法
- 在.js中创建"子类"实例,并挂载到元素上
- 在.js中导出一个自定义对象,用于对外提供统一的方法
- 在 components 根目录下新建index.js文件,并提供一个函数,并导出
- 在提供的函数中添加原型方法
- 在 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 实例没有
e
l
属
性
,
元
素
也
不
可
被
访
问
(
在
实
例
挂
载
之
后
,
元
素
才
可
以
用
v
m
.
el 属性,元素也不可被访问(在实例挂载之后,元素才可以用 vm.
el属性,元素也不可被访问(在实例挂载之后,元素才可以用vm.el 访问),需要显式调用 vm.$mount() 手动开启编译(挂载)
通过 new 创建 Vue 实例时如果存在 el 选项,实例将立即进入编译过程(挂载)
注意
提供的元素只能作为挂载点。挂载点会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。
vm.$mount( [elementOrSelector] )
如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。
可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
使用 vm.$mount() 手动地挂载一个未挂载的实例,此时Vue实例上就有了
e
l
属
性
,
此
时
el 属性,此时
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 8: mount("#̲id") 或 vm.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参数要求一致
开发插件代码示例
待续…