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