Usage of mixins in Vue

• A mixin can define public variables or methods, but the data in the mixin is not shared, that is, the mixin instances in each component are different, and they are all separate individuals without mutual influence;

Code example:

minxin.js

export const myMixins = {
    
    
	data() {
    
    
		return {
    
    
			name: 'zs',
			age: 18,
			flag: false
		}
	},
	onLoad() {
    
    
		console.log('111')
	}
}

The page uses:

<template>
	<view>
		{
    
    {
    
    name}}--- {
    
    {
    
    age}}
		<button @click="add">年龄增加</button>
	</view>
</template>

<script>
	import {
    
     myMixins } from '../../mixin/mixin.js'
	export default {
    
    
		data() {
    
    
			return {
    
    
				
			}
		},
		mixins: [myMixins], //mixins的onLoad会先被调用,然后再执行页面的onLoad
		onLoad() {
    
    
			console.log('1112')
		},
		methods: {
    
    
			add() {
    
    
			   this.age+=1
			}
		}
	}
</script>