var ASSET_TYPES = [
'component',
'directive',
'filter'
];
function initGlobalAPI (Vue) {
......
Vue.options = Object.create(null);
ASSET_TYPES.forEach(function (type) {
Vue.options[type + 's'] = Object.create(null);
});
// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue;
extend(Vue.options.components, builtInComponents);
......
initAssetRegisters(Vue);
}
下面来查看initAssetRegisters函数
function initAssetRegisters (Vue) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(function (type) {
Vue[type] = function (
id,
definition
) {
......
this.options[type + 's'][id] = definition;
return definition
}
};
});
}
上面可以了解到Vue[type] 中的type即为 'component', 'directive', 'filter',也就是我们平时用到的自定义组件Vue.component函数就是用这个函数定义实现的
this.options[type + 's'][id] = definition;
这个说明Vue.opitons.components下我们可以查到所有的有Vue.component自定义的组件
Vue.options
{
components: {KeepAlive: {…}, Transition: {…}, TransitionGroup: {…}, ElPagination: ƒ, ElDialog: ƒ, …}
directives: {model: {…}, show: {…}, popover: {…}, InfiniteScroll: {…}, loading: {…}}
filters: {}
}
Vue.options.components
这里我们可以看到用Vue.use(ElementUi)加载的所有自定义组件
Vue.use数据流实现 点击查看(https://www.jianshu.com/p/2b959d1c9b45)
{
ElAlert: ƒ VueComponent(options)
ElAside: ƒ VueComponent(options)
ElAutocomplete: ƒ VueComponent(options)
ElAvatar: ƒ VueComponent(options)
ElBacktop: ƒ VueComponent(options)
......
KeepAlive: {name: "keep-alive", abstract: true, props: {…}, created: ƒ, destroyed: ƒ, …}
Transition: {name: "transition", props: {…}, abstract: true, render: ƒ}
TransitionGroup: {props: {…}, methods: {…}, beforeMount: ƒ, render: ƒ, updated: ƒ}
}
网友评论