new Vue()、component
首先我们来约定一个选项对象 baseOptions,后面的代码会用到.
let options = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }, created(){ console.log('onCreated-1'); } };
new Vue() source:vue/src/core/instance/index.js
实例化一个组件.
new Vue(baseOptions); // -> onCreated-1 component source:vue/src/core/global-api/assets.js
Vue.component 是用来注册或获取全局组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件.全局注册的组件可以在所有晚于该组件注册语句构造的Vue实例中使用.
Vue.component('global-component', Vue.extend(baseOptions)); //传入一个选项对象(自动调用 Vue.extend),等价于上行代码. Vue.component('global-component', baseOptions); // 获取注册的组件(始终返回构造器) var MyComponent = Vue.component('my-component')
当我们需要在其他页面‘扩展'或者叫‘混合'baseOptions时,Vue中提供了多种的实现方式:extend,mixins,extends.
extend source:vue/src/core/global-api/extend.js
可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器。
let BaseComponent = Vue.extend(baseOptions); //基于基础组件BaseComponent,再扩展新逻辑. new BaseComponent({ created(){ //do something console.log('onCreated-2'); } //其他自定义逻辑 }); // -> onCreated-1 // -> onCreated-2
mixins
mixins 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。
new Vue({ mixins: [baseOptions], created(){ //do something console.log('onCreated-2'); } //其他自定义逻辑 }); // -> onCreated-1 // -> onCreated-2
extends
这和 mixins 类似,区别在于,组件自身的选项会比要扩展的源组件具有更高的优先级.
官方文档是这么写的,除了优先级,可能就剩下接受参数的类型吧,mixins接受的是数组.
new Vue({ extends: baseOptions, created(){ //do something console.log('onCreated-2'); } //其他自定义逻辑 }); // -> onCreated-1 // -> onCreated-2
内容版权声明:除非注明,否则皆为本站原创文章。