vue中mixins的使用方法

参考官网以及网上的一些资料，最基本的用法

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue
组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,可以方便管理与统一修改

common.js文件

export const mixin = {
    
    
	data() {
    
    
		return {
    
    
			num: 1
		}
	},
	methods: {
    
    
		fangfa() {
    
    
			console.log('vue中mixins的使用方法')
		}
	}
}

vue文件

<script>
import {
    
     mixin } from '../../common/common' //common.js的路径

export default {
    
    
	mixins: [mixin],
	mounted() {
    
    
		this.fangfa()
		console.log('num',this.num)
	}
}
</script>

运行

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。