vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并)到各个组件中使用,方便管理与统一修改。下面举例一些简单的引用用于自己理解和记忆:
- 先定义一个mixins
// 创建一个需要混入的对象 export const mixinHello = { created() { this.hello(); }, methods: { hello() { console.log('Hello'); } } };
- 在自己的组件中使用
import {myMixin} from './../assets/js/mixin'; export default { mixins:[myMixin], name: 'hello', data () { return { msg: 'Welcome to Your project' } } }
这样输出是结果是怎样的呢?
相当于我们自己的组件是这样子的:
export default { name: 'hello', data () { return { msg: 'Welcome to Your project' } }, created() { this.hello(); }, methods: { hello() { console.log('Hello'); } } }
明白了吧?是不是很简单哦~~