vue.extend，mixins和vue.component的区别

2020-05-14 19:54:48 阅读：379 来源： 互联网

标签：vue Sub extend component mixins Vue 组件 Options

1. Vue.extend

Vue.extend就是传入一下组件options，然后返回了一个Vue的子类，也可以看做是一个组件构造函数。

真的是一个Vue的子类，源码中，使用原型集成和Copy属性和方法形式，将其继承自Vue。

const Sub = function VueComponent (options) {
    this._init(options)
}
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
Sub.options = mergeOptions(
    Super.options,
    extendOptions
)
Sub['super'] = Super

2. Vue.component

Vue.component是一个插件注册方法，就是把Vue.extend函数new出来的组件实例，注册到Vue的Options上。本质是也就是在全局Vue实例的Options，

添加了一个key/value，value就是组件实例。由于组件的Options会继承Vue的Options，所以在任何组件中，都能调用该组件。

Vue.component('global-component', Vue.extend(baseOptions));

这是原始的调用方式，用Vue.extend注册一个组件。Vue内部对其进行了简化，可以省略调用Vue.extend，只传入Options就行了

//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', baseOptions);

3. Vue.mixins

mixins可以全局添加一些方法或属性，方便所有组件调用。可以用来添加通用的对象引用和方法

Vue.mixin({
    data:{
        //组件中可以使用this.$axios来调用axios的方法，十分方便
        $axios: axios
    },
    methods: {
        //每个组件从全局store中取出用户信息
        getUser() {
            return store.getters.user;
        }
    }
})

总结：

1. mixins是对Vue的Options进行添加，由于组件会继承Vue的options，相当于给所有实例添加了Options。用于添加公共行为。

2. extend产生一个Vue子类，只会影响这个子类的实例对象，不会对Vue类本身即其他Vue组件实例产生影响。

标签：vue,Sub,extend,component,mixins,Vue,组件,Options
来源： https://www.cnblogs.com/mengff/p/12890968.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue.extend，mixins和vue.component的区别