美文网首页vue源码分析
Vue.options.components VS Vue.co

Vue.options.components VS Vue.co

作者: Wendy81 | 来源:发表于2020-11-02 14:51 被阅读0次
    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: ƒ}
    }
    

    相关文章

      网友评论

        本文标题:Vue.options.components VS Vue.co

        本文链接:https://www.haomeiwen.com/subject/cgwdvktx.html