1.mixins和Vue.mixin
- mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
这是官网对混入的解释,按照自己理解mixins就是定义一个对象包含公共的方法或者数据,计算属性等,然后混入到多个组件中使用,方便管理与统一修改。
-
Vue.mixin
全局注册混入对象。注意使用! 一旦使用全局混入对象,将会影响到所有之后创建的 Vue 实例。使用恰当时,可以为自定义对象注入处理逻辑。
2.mixins
- 2.1 创建一个要混入的对象(commonMixin.js)
export const common={
methods:{
sayHello:()=>{
console.log('hello');
}
}
}
- 2.2 组件中使用刚刚创建的混入
import {common} from '../assets/js/commonMixin.js'
export default{
data(){
return{
}
},
mixins:[common],
mounted(){
this.sayHello();
}
}
注意:当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。混入
3.Vue.mixin
Vue.mixin({data(){
return{
mix:"vue mix"
}
}})