Vue.component 讲解

Vue.component 用于注册一个组件

代号95+27

2691人浏览 · 2022-01-16 13:58:45

代号95+27 · 2022-01-16 13:58:45 发布

Vue.component 用于注册一个全局组件,component函数在function initAssetRegisters (Vue)里面进行定义的，而initAssetRegisters函数在function initGlobalAPI (Vue)里面被调用。initAssetRegisters的函数定义如下:

function initAssetRegisters (Vue) {
    /**
     * Create asset registration methods.
     * 	var ASSET_TYPES = [
     *	'component',
     *	'directive',
     *	'filter'
  	 *	];
     */
     
    ASSET_TYPES.forEach(function (type) {
      Vue[type] = function (
          id,
          definition
      ) {
        if (!definition) {
          return this.options[type + 's'][id]
        } else {
          /* istanbul ignore if */
          if (type === 'component') {
            validateComponentName(id);
          }
          if (type === 'component' && isPlainObject(definition)) {
            definition.name = definition.name || id;
            definition = this.options._base.extend(definition);
          }
          if (type === 'directive' && typeof definition === 'function') {
            definition = { bind: definition, update: definition };
          }
          this.options[type + 's'][id] = definition;
          return definition
        }
      };
    });
  }

initAssetRegisters 函数同时定义了Vue.component、Vue.directive和Vue.filter三个vue 全局方法，这里只分析Vue.component。当掉用Vue.component时，首先判断definition是否为空或者undefined，如果definition有值，再根据id即Vue.component第一个参数传入的值，在当前this.options['components']里面查找是否已经存在该component，如果存在，就直接返回。其中this可以是Vue构造函数，或者通过extend扩展的Vue组件。
如果不存在组件就继续往下执行，根据当前调用的是否是Vue.component函数，如果是component函数的话，就调用validateComponentName判断当前注册组件的id命令规则是否合法。如果合法的话，就继续执行如下代码:

if (type === 'component' && isPlainObject(definition)) {
            definition.name = definition.name || id;
            definition = this.options._base.extend(definition);
          }

通过调用:

this.options._base.extend(definition)

创建组件，返回的是一个继承了Vue的组件构造函数，创建成功后存储到options['components']里面。
其中this.options._base.extend方法是在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;

_base.extend方法调用的就是Vue.extend方法.
Vue.component返回的是一个继承了Vue的组件构造函数，可以实例化一个组件实例，该组件继承了Vue，示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>

</body>
<script>
    let c=Vue.component("test",{
        template:"<div>hellow world</div>"
    });

    new c({
        el:"#app"
    })
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^