如何注册组件、指令、过滤器

146 阅读1分钟

本节简述 组件/指令/过滤器 的注册过程

const ASSET_TYPES = ['component', 'directive', 'filter'];

如上图与代码所示,全局注册是在 initAssetRegisters() 函数内对 component、filter、directive 注册。上图的内容包含:Vue.component()、Vue.filter()、Vue.directive() 三个工具函数。

Vue.component() 内先设置注册组件的 name,然后通过 Vue.extend() 函数将组件信息 definition 转为组件构造器,最后挂载在 Vue.options.component 上。

Vue.directive() 内先判断若 definition 为函数类型,则转为对象类型,然后通挂载在 Vue.options.directive 上。

其它情况默认直接绑定在对应类型的 Vue.options 上,并返回 definition 对象。


1、依据组件名或组件 id 如何获取组件构造器?

通过组件 id 直接在 options.components 上直接获取,若拿不到则将 id 变为驼峰式继续获取,若再拿不到则在驼峰式的基础上将首字母大写形式继续获取,若再拿不到,则说明写错了。

2、局部注册也是比较简单,在组件实例化过程中,会将组件 optionsVue.options 合并到组件实例 vm.$options,组件 options.components 也被合并。这样在 _createElement() 函数内通过 resolveAsset() 函数获取到组件的构造函数,然后生成组件 vnode 对象。同时这也是为什么全局组件可以被任意使用,Vue.options 被合并到实例 vm.$options 属性上。