vue mixins

1、概述

mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改

2、示例

（1）定义一个mixin.js

export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};

（2）组件引入

import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}

这样就可以直接调用到混入对象中的hello方法

 

3、第二个示例

<template>

</template>
<script>
    import Vue from 'vue'

    var mixin = {
  created: function () { console.log(1) },
  methods:{
      hello(){
                console.log('mixin：hello')
            }
  }
}
    export default {
        data() {
            return {
            }
        },
        methods: {
            hello(){
                console.log('组件：hello')
            }
        },
        created: function () { console.log(2) },
        mixins: [mixin],
        mounted: function(){
            this.hello();
        }
    }
</script>

输出为：

created初始化了2次，并且组件自己的created后执行。
对于 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。