Vue: 组件扩展

在 Vue 扩展一个组件，有几种方式：

全局混入

Vue.mixin({

});

全局混入，只能定义 Vue 组件生命周期的属性或方法, 定义其他属性或方法不生效，如：

Vue.mixin({
    methods: {

    },
    created: function() {

    },
    updated: function() {

    }
});

如果组件本身自己定义了 add 方法，则会调用组件本身的 add 方法，而不会调用这个全局混入的 add 方法。

如果混入生命周期的方法，如 updated, destory 等，组件本身的这些方法会执行， 然后再执行混入的这些方法。

组件混入

组件混入，是指把功能注入到指定的组件，可以先把通用功能提取出来，然后再注入到需要的组件上去：

// mixin.js
const mixin = {
    methods: {
        getSelectedData: function() {
            // 
        },

        deleteData: function() {
            //
        }
    }
}

// Vue Component
import mixin from './mixin.js'
export default {
    mixins: [ mixin ] // 指定混合的内容
}

全局混入和组件混入规则都是一样的。

混入总结

为什么要叫混入，而不叫扩展，是因为却实不是扩展了组件的对象，反而有点和 JavaScript 中对象的 原型链 一样, 当 Vue 框架在为某个事件调用指定的方法时，首先会检查组件本身是否有此方法，如果没有就检查组件混入信息，没有找到对应的方式再去全局混入信息中查找。 组件生命周期的方法，则混入的方法和组件本身的方法都会被调用。

组件扩展

Vue 框架为组件提供了另一种扩展， extends, 这种方式就是真的把两个对象的信息合并，组成新组件的内容：

export default {
    extends: Button,

    methods: {
        // 重写相应的方法
    }
}

如果继承了对象，只需要重写对应的方法，则可以创建一个 js 文件，直接按上面的方式继承并重写相关的方法，如果需要修改界面，有两种方式：

1. 创建一个 vue 文件，并编写相应的 template 标签, 这样整个组件的 UI 都会被替换。
2. 创建 JS 文件，继承组件，然后在 created 事件里通过 js 代码来修改 UI。

总结

看起来不太那么面像对象