Vue.component 讲解

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.component 讲解相关推荐

vue component created没有触发_Vue的难点解析
watch 和 computed 和 methods 区别是什么? computed 计算属性,在模板中双向绑定一些数据或表达式时,如果表达式过长,或逻辑更为复杂,就会变得臃肿,难以维护和阅读 < ...
vue component动态组件_vue-component组件
compontent组件名称如何定义? Vue.component('name', { /* ... */ }) 第一个参数就是"name'"组件的名字. 如果我们想在HTML中写 ...
webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸插件插件可以完成更多 loader 不能完成的功能.插 ...
vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固 Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部 ...
vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
@Prop 父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template><div> ...
vue indev.html,webpack - Can't add script tag to Vue component files ( *.vue ) - Stack Overflow
I'm new to vue.js. I'm trying to render vue component file but when I add to vue component, for exam ...
vue component created没有触发_面试！面试！面试！vue常见面试题。
"金三银四"的时候到了,一大批准备跳槽的程序员蠢蠢欲动,小编最近也在投简历,找工作.现在很多公司都要求vue.react.ng三大主流框架中的一两个.小编在此总结一下vue常见的面 ...

Vue.component 讲解

Vue.component 讲解相关推荐

最新文章

热门文章