Vue中的“混合”——mixins使用方法

混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用

var mixin = {
  created: function () {
    console.log('混合对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})
// -> "混合对象的钩子被调用"
// -> "组件钩子被调用"

具体用法详见：https://cn.vuejs.org/v2/guide/mixins.html

这里注意的是：

1：mixin定义的是一个对象；

2：mixin定义的对象中包含的内容，可以通过再vue中的mixins引入进去；

3：名字相同的会合并，根据这一原理，可以在不同的地方定义vue中的参数，然后合并；

4：注意的是这里并不是vue的子组件形式，子组件定义的数据，是可以直接在html中调用的，但是这里widget定义的对象，是通过mixin引入vue中的；

人才库中例子：

<div class="header">
        <div class="header-content">
            <div class="header-title"><a href="$homeLink" title="京东人才库"></a></div>
            <div class="fr">
                <div class="home">
                    <a href="index.html"><span class="home-icon"></span>首页</a>
                    <a href="javascript:;" class="total-data" v-on:click="showAll()"><span class="data-icon"></span>全部数据</a>
                </div>
                <div class="header-user" v-cloak>
                    <span class="verti-line"></span>
                    <a class="avatar" href="javascript:;"><img :src="imgurl"></a>
                    <a class="user-name" href="javascript:;">{{userinfo.userName}}</a>
                    <a class="resign" href="/logout">退出</a>
                </div>
            </div>
        </div>
    </div>
    <div class="gradient-line"></div>

widget的（注意没有使用子组件形式<script type="text/x-template" id="xxx"></script>定义）,相应的js

define(function (require, exports, module) {
    var public = require('/js/common').public;
    // mixins
    module.exports = {
        data: function () {
            return {
                userinfo: {}
            }
        },
        computed: {
            imgurl: function () {
                return this.userinfo.imgurl ? this.userinfo.imgurl : 'http://img/dd.png';
            }
        },
        mounted: function () {
            var userinfo = public.getLoginData();
            this.userinfo = userinfo;
        }
    }
});

这里定义的对象的字段值data、computed、mounted均是和vue的构造参数一致，方便后面的名称一致得合并；

在vue中定义：

var header =require('/widget/header/header');
new Vue({
    el: '#app',
    mixins: [header],//这里引入，将引入的对象和vue中的相同参数合并
    data:{},
    ...
})