混入（mixins）是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。
当组件使用混入对象时，所以混入对象的选项将被混入该组件本身选项，当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合
当组件和混入对象数据发生冲突时以组件数据优先
如：
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})同名钩子函数将混合为一个数组，都将被调用，混合对象的钩子将先调用，组件自身钩子后调用
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"因为混入（mixins）是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。
所以对于混入对象可以放在一个js文件中封装然后引入组件
如：在src/common/js/mixins.js是编写混合的
export const playlistMinin = {
computed: {
//代码
},
mounted() {
//代码
},
methods: {
//代码
}
}
export const playerMixin= {
computed: {
//代码
},
mounted() {
//代码
},
methods: {
//代码
}
}在组件components/singer/singer.vue中使用上面的代码
<script type='text/ecmascript-6'>
import {playlistMinin,playerMixin} form '../../common/js/mixin';
export default{
mixins:[playlistMinin,playerMixin],
}
</script>