Vue 中mixin 的用法

• mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

代码示例：

minxin.js

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

页面使用：

<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>