Cómo usar mixins en vue

Consulte el sitio web oficial y alguna información en Internet, el uso más básico

Mixin proporciona una forma muy flexible de distribuir
funciones reutilizables en componentes de Vue . Un objeto de mezcla puede contener cualquier opción de componente. Cuando un componente usa un objeto mezclado, todas las opciones del objeto mezclado serán "mezcladas" con las opciones del componente en sí.
Los mixins deben definir una parte de los métodos públicos o propiedades calculadas y luego mezclarlos en varios componentes para su uso, que se pueden administrar fácilmente y modificar de manera uniforme.

archivo common.js

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

archivo vue

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

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

correr

Cuando un componente y un objeto mixin contienen opciones con el mismo nombre, estas opciones se "fusionarán" de forma apropiada.
Por ejemplo, los
objetos de datos se fusionarán de forma recursiva internamente y, cuando se produzcan conflictos,
se dará prioridad a los datos de los componentes. Las funciones de enlace del mismo nombre se fusionarán en una matriz, por lo que se llamarán a todas. Además, el gancho del objeto mixto se llamará antes que el gancho del componente en sí.
Las opciones cuyos valores son objetos, como métodos, componentes y directivas, se combinarán en el mismo objeto. Cuando los nombres de clave de dos objetos entran en conflicto, tome el par clave-valor del objeto componente.