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

 

posted @ 2017-07-03 16:57  小猪冒泡  阅读(8237)  评论(0编辑  收藏  举报