element-ui focus.js和migrating.js文件源码学习

看switch组件时，看到了对这两个文件的引用，下面来看看这两个文件的内容。

一、focus.js文件

直接看下文件内容

export default function(ref) {
  return {
    methods: {
      focus() {
        this.$refs[ref].focus();
      }
    }
  };
};

传入了ref的参数，而focus方法则是在注册过的refs集合中获取ref对象，并聚焦。

二、Migrating.js文件

该文件主要是用于开发环境下提示一些迁移或者即将修改的属性和方法的。

mounted()

我们看下当组件挂载后，会执行啥。

if (process.env.NODE_ENV === 'production') return;
if (!this.$vnode) return;

首先是对当前环境的判断，假如是生产环境下时，就retuen，就不会在控制台下输出提示信息。如果不是vue的虚拟节点的话，也需要跳出，因为后面有对改属性的操作。

随后用结构从getMigratingConfig()方法下获取了哪些属性和方法是要提示的，从节点的配置中获取了他有哪些属性和方法。

最后两个for循环各自处理属性和方法下，使用了且需要迁移的，并于控制台警告打印出来。用hasOwnProperty只是保证是这两个值得自有属性，防止in遍历到了父辈组件中。

methods

• getMigratingConfig()：获取迁移属性或者方法。

由于整个文件是用于混入使用的，引用文件中会重新定义该方法，存入对应的属性和方法，来覆盖此文件中的该方法。

带注释的源码下载：focus.js、migrating.js。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!