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:{},
    ...
})