vue中的mixins说明

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

例子：
mixins_one.js
export const mixinTest1 = {
created() {
this.hello();
},
methods: {
hello() {
console.log(‘mixinTest1’);
}
}
};

组件引入:

test.js

import {mixinTest1} from ‘./js/mixins_one.js’;
export default {
mixins:[mixinTest1],//可以以数组的形式引入多个
name: ‘hello’,
data () {
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}

当然，test.js也可以继续被引入到另一个页面,例如：
test2.js

import {test2} from ‘./test2.js’;
export default {
mixins:[test2],//可以以数组的形式引入多个
name: ‘hello’,
data () {
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}

类型：

局部混入
var mixin = {
methods: {
sum(){
alert( 10*10 )
}
},
}
new Vue({
el: ‘#app’,
data: {},
watch: {},
mixins: [mixin],
computed: {}
})

全局混入：
注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。
import Vue from ‘vue’

Vue.mixin({
created(){
console.log(“这是全局内容”)
},
methods:{
bar(){
console.log(“hello World”)
}
}
})