mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

 使用方式：
 1. 定义混合：
     const {
         data(){....},
         methods:{....},
         ....
     }
 2. 使用混入：
     （1）全局混入：Vue.mixin(xxx)
     （2）局部混入：mixins:['xxx']

举例说明：
//全局混入
**main.js**
import {mixin,mixin2} from './mixin'

Vue.mixin(mixin)
Vue.mixin(mixin2)

//全局混入时所有的vc vm 都会使用

//局部混入
**App.vue**
<template>
   <div>
       <School/>
       <Student/>
   </div>
</template>
<script>
   import School from './components/School'
   import Student from './components/Student'
  
   export default {
      name: 'App',
      components:{
         School,
         Student
      }
   }
</script>

**School.vue**
<template>
   <div>
       <h2 @click="showName">学校名称:{{ name }}</h2>
       <h2>学校地址:{{ address }}</h2>
   </div>
</template>

<script>
    //引入一个混合
    import {mixin} from '../mixin'
    export default {
        name: 'School',
        data(){
           return{
             name:'清华大学',
             address: '北京'
           }
        },
        mixins:[mixin]
        //methods:{
            //showName(){
               //alert(this.name)
            //}
        //}
    }
</script>

**Student.vue**
<template>
   <div>
       <h2 @click="showName">学生名称:{{ name }}</h2>
       <h2>学生性别:{{ sex }}</h2>
   </div>
</template>

<script>
    import {mixin,mixin2} from '../mixin'
    export default {
        name: 'Student',
        data(){
           return{
             name:'陈慕夏',
             sex: '女',
             x: 66
           }
        },
        mixins:[mixin,mixin2],
        mounted(){
		   console.log('你好啊！欢迎你进入大学！')
		}
        //methods:{
            //showName(){
               //alert(this.name)
            //}
        //}
    }
</script>


**mixin.js**
export const mixin = {
	methods:{
	    showName(){
            alert(this.name)
        }
	},
	mounted(){
	   console.log('你好啊！')
	}
}
export const mixin2 = {
	data(){
	   return {
	      x: 100,
	      y: 200
	   }
	}
}

//注意
如果组件里没有的，但是混合里有的，用混合的；如果组件里有的，混合里也有，以组件自身已有的为主。
但是生命周期钩子mounted不以任何为主，都会使用到，同时会先看到混合里的生命周期钩子mounted，后看到组件自身定义的生命周期钩子mounted