Vue—mixin混入

## mixin(混入)

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

2. 使用方式：

第一步定义混合：

```

{

data(){....},

methods:{....}

....

}

```

第二步使用混入：

全局混入：```Vue.mixin(xxx)```

局部混入：```mixins:['xxx'] ```

School.vue：

<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>
<script>
    //import {hunhe,hunhe2} from '../mixin'
    export default {
        name:'s-school',
        data() {
            return {
                name:'****',
                address:'北京·昌平'
            }
        },
        //mixins:[hunhe,hunhe2]
    }
</script>

Student.vue:

<template>
    <div >
        <h2 @click="showName">学生名称：{{ name }}</h2>
        <h2>学生性别：{{sex}}</h2>
    </div>
</template>
<script>
    //import {hunhe} from '../mixin'
    export default {
        name:'s-student',
        data() {
            return {
                name:'Gui',
                sex:'female'
            }
        },
        //mixins:[hunhe]
    }
</script>


App.vue:

<template>
    <div>
        <School/>
        <hr>
        <Student/>
    </div>
</template>
<script>
    import School from './components/School'
    import Student from './components/Student'
    export default {
        name:'App',
        components:{School,Student},
    }
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from "./mixin";
Vue.config.productionTip = false
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
//全局混合，所有元素都可以拿到混合中的元素
new Vue({
  render: h => h(App),
}).$mount('#app')

mixin.js

export const hunhe={
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
export const hunhe2={
    data(){
        return {
            x:100,
            y:200
        }
    }
}
//数据或者方法冲突时候，以源代码为主
//如果生命周期属性冲突时 两者都执行  并且混合中的生命周期先执行