注册全局组件
- 使用Vue.component()方法注册全局组件。
- 第一个参数是自定义元素名称,也就是将来在别的组件中使用这个组件的标签名称。
- 第二个参数是将要注册的Vue组件。
1 2 3 4 5 | import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // 将loading注册为全局组件,在别的组件中通过<loading>标签使用Loading组件 Vue.component('loading', Loading); |
使用Vue.use注册插件
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,
- Vue.use是什么?
官方对 Vue.use() 方法的说明:通过全局方法 Vue.use() 使用插件,Vue.use 会自动阻止多次注册相同插件,它需要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法
- Vue.use() 的源码中的逻辑
在源码中首先限制了它传入的值的类型只能是Function或者Object,然后判断了该插件是不是已经注册过,防止重复注册,然后调用了该插件的install方法,源码中也有介绍到Vue.use()可以接受多个参数的,除第一个参数之后的参数我们都是以参数的形式传入到当前组件中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this } } |
- Vue.use()使用的时机
它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:
1 2 3 | import Vue from 'vue' import Element from 'element-ui' Vue.use(Element) |
因为在Element源码中会暴露除install方法,所以才需要用Vue.use()引入。
我们也可以在自己的vue项目中自己定义一个install方法,然后通过Vue.use()方法来引入测试一下:
1 2 3 4 5 6 7 | const plugin = { install() { alert("我是install内的代码") }, } import Vue from "vue" Vue.use(plugin) // 页面显示"我是install内的代码" |
当我们打开页面就会弹出“我是install内的代码”提示。