main(调用一个公共组件)

app.vue

<template>
	<div>
		<Student/>
		<School></School>
	</div>
</template>
<!--
	1.作用（mixin）：将多个组件内相同的方法提取到一个混合对象
	2.如何使用：
	全局使用：在main.js中进行使用：
	import {混合变量名} from './maxin.js'
	Vue.mixin(混合变量名)
	局部使用：在Student/School中进行使用：
	import {maxin} from '../maxin.js'
	mixins:[变量名]
 -->
<script>
	import Student from './components/Student'
	import School from './components/School'
	export default{
		name:'App',
		components:{Student,School}
	}

</script>

<style>
</style>

　　student.vue

<template>
	<div>
		<h3>学校名称:{{name}}</h3>
		<button @click="show">点我，提示学生姓名</button>
	</div>
</template>

<script>
	// import {maxin} from '../maxin.js'
	export default {

		name:'School',
		data(){
			return{
				name:'渲染学校'
			}
		},
		// mixins:[maxin]
	}
</script>

<style>
</style>

　　scholl.vue

<template>
	<div>
		<h3>学生姓名:{{name}}</h3>
		<button @click="show">点我，提示学生姓名</button>
	</div>
</template>
<!-- 

 -->
<script>
	//局部混合
	// import {maxin} from '../maxin.js'
	export default {
		name:'Student',
		data(){
			return {
				name:'wei'
			}
		},
		//mixins:[变量名]
		// mixins:[maxin]
	}
</script>

<style>
</style>

　　main.js

import Vue from 'vue'
import App from './App.vue'
//全局混合
import {maxin} from './maxin.js'
Vue.mixin(maxin)
Vue.config.productionTip = false
new Vue({
	el:'#app',
	render: h => h(App)
})

　　maxin.js

export const maxin = {
	methods:{
		show(){
			alert(this.name)
		}
	}
}