vue 混合

混合是一种灵活的分布式复用 Vue 组件的方式。
混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
另外，混合对象的 钩子将在组件自身钩子之前调用 。

例子：

<div id="scheduleSet">
</div>
<script src="./js/personSchedule.js"></script>
<script src="./js/scheduleMixin.js"></script>

personSchedule.js

    var personSchedule = new Vue({
        el : "#scheduleSet",
        template : res.data,        
        data:{
            message:"mixin"
        },
        //混合对象的 钩子将在组件自身钩子之前调用
        //把其他js声明对象放入混合数组中
        mixins:[smixin,mymixin],
        methods:{
            hello:function(){
                //调用scheduleMixin.js中的data数据
                //改变原有的值
                this.dataname = "张三";
                console.log("hello");
                //调用scheduleMixin.js中的方法
                this.sayh();
            }
        }
    })

scheduleMixin.js

var smixin = {
        data:{
            dataname:"111123"
        },
        methods:{  
            add:function(name){
                //改变原有的值
                this.dataname="哈哈哈";
                //调用personSchedule.js代码中vue根实例中的数据
                //改变原有的值
                this.message="这是message";
            },
            say:function(){  
                alert('I am mixin');  
             },
             sayh:function(){
                console.log("I am sayh");
             }
        }  
}