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，将被合并為同一個對象。兩個對象鍵名沖突時，取元件對象的鍵值對。