mixin（混入）（公共js调用；模块化）

···局部混入：

       前提：如果子组件（SchoolLqj.vue）,(StudentLqj.vue)要实现相同的功能

       例如：点击时都要弹出名字（学校名字，学生名字）

1.首先要创建一个在crs目录下xxx.js(用于放公共js方法),这里我们为它起名字为mixin.js

mixin.js:

export const xxx  //此export写法为：分别暴露

exportconstmixin= {    //此export写法为：分别暴露methods:{
dianji(){
alert(this.name)
                        }
                }
        }

StudentLqj.vue

template:

<template><div><h2@click="dianji">学生姓名：{{name}}</h2><h2>学生性别：{{msg}}</h2></div></template>

script:

<script>import {mixin} from'../mixin'...exportdefault{
...mixins:[mixin]
                }
</script>

SchoolLqj.vue

template:

<template><div><h2@click="dianji">学生姓名：{{name}}</h2><h2>学生性别：{{msg}}</h2></div></template>

script:

<script>import {mixin} from'../mixin'...exportdefault{
...mixins:[mixin]
                }
</script>

结果：我们想要的时点击<h1/>中的数据时会弹出窗口显示里面的数据
        现在我们将一个mixin.js方法分别给StudentLqj.vue与SchoolLqj.vue调用
        就会与分别在两个组件中写方法实现相同功能

·mixin（混入）优先级：
·mixin<子组件

(组件调用mixin.js之后，如果组件中有的按照组件中的显示，如果组件中没有的按照mixin.js中的显示)

例如：

mixin.js:

exportconstmixin2= {
data(){
return{
lqj:100,
x:200                        }
                }
        }

SchoolLqj.vue

template:

<template><div><h2@click="dianji">学校姓名：{{name}}</h2><h2>{{lqj}}</h2><h2>{{x}}</h2><h2>学校地址：{{address}}</h2></div></template>

script:

<script>import {mixin, mixin2} from'../mixin'exportdefault {
name:'SchoolLqj',
data(){            
return{
address:'北京',
name:'尚硅谷',
lqj:'666'                        }
                        },
mixins:[mixin,mixin2]
                }
</script>

结果：在{{lqj}}处显示666，{{x}}处显示200。（mixin混入是把mixin.js中写的
        方法与与调用的子组件进行合并，一起显示，但是由于优先级不同，所以如果mixin与子组件之间
        都有同一个方法时，会显示组件中的！）

注意：对于生命周期钩子函数（mounted（）{}）来说，不管是在mixin.js所写的mounted（）{}还是

       在子组件中所写的mounted（）{}，vue给出的处理是，都要！但是mixin中的mounted会先执行！

       优先级：

       mixin>子组件

举例：

mixin.js:

                export const mixin2 = {
                        mounted(){
                                console.log('我是lqj,你是小胖子吗？')
                        }
                }

StudentLqj.vue:

<script>import {mixin2} from'../minix'exportdefault {
...mounted(){
console.log('我是lqj,你是小胖子吗？')
                                }   
...                        }
</script>

SchoolLqj.vue:

<script>import {mixin2} from'../minix'exportdefault {
...mounted(){
console.log('我是lqj,你是小胖子吗？')
                                }   
...                        }
</script>

结果：页面的控制台中会打印四次“我是lqj，你是小胖子吗？”，因为我们在mixin中写的打印的方法，并且供两个组件调用后，

       两个组件里面也有打印方法，因为（对于生命周期函数（mounted来说，vue的处理时：都要！）），所以mixin中的mounted和

       组件中的mounted都显示！

       注意：mixin中的mounted会先执行！

...全局混入：

       1.首先和上面一样先写好mixin.js公共js供main.js（全局调用）

       2.在main.js中写入（如下：）

       main.js:

       import {mixin,mixin2} from './mixin'

       Vue.mixin(mixin)

       Vue.mixin(mixin2)

       注意：此时组件中不用再去调用mixin.js，全局混入会将main.js调用的mixin.js分配给所有的子组件！