mixin混入(合)

// 分别暴露
export const mixin = {
    methods:{
        showName () {
          alert(this.name)
        }
      },
    mounted() {
        console.log('你好啊')
    },
}
// 默认暴露
// export default mixin

export const mixin2 = {
    data() {
        return {
            x:100,
            y:200,

        }
    },
}
----------------------------------------------------------------------------------------

  <template>
    <div>
      <!-- 付款方 -->
      <Student/><hr>
      <MySchool></MySchool>
      <hr/>
    </div>

    mixin(混入) <hr/>
    功能:可以把多个组件共用的配置提取成一个混入对象 <hr/>
    使用方法: <hr/>
    第一步定义混合:例如 <hr/>
    { <hr/>
      data(){...} <hr/>
      methods:{...} <hr/>
      ... <hr/>
    } <hr/>
    第二步使用混入:例如 <hr/>
    (1.)全局混入: Vue.mixin(xxx) main.js <hr/>
    (2.)局部混入: mixins:['xxx'] <hr/>
  </template>
  
  <script>
  // 引入school组件
import Student from './components/Student.vue'
import MySchool from './components/School.vue'
  export default {
    name: 'App',
    components: {
        Student,
        MySchool
    },
    data() {
      return {
      }
    },
    methods :{
    },
  
  }
  </script>
  
  <style>
  
  </style>

  -------------------------------------------------------------------------------------

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

<script>
// 引入一个混合
import { mixin,mixin2 } from './mixin'
export default {
    name:'MySchool',
     props: {
    },
    data() {
        return {
            name:'越焦虑越无从下手',
            address:'大连',
            x:666,
        }
    },
    mounted() {
        console.log('你好啊!!!!!!!!')
    },
    // methods:{
    //   showName () {
    //     alert(this.name)
    //   }
    // }
    mixins: [mixin,mixin2]


}
</script>

<style>

</style>

----------------------------------------------------------------------------------------

<template>
  <div class="">
    <h2 @click="showName">学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
// 引入一个混合
import { mixin, mixin2} from './mixin'
export default {
    name:'MyStudent',
     props: {
    },
    data() {
        return {
            name:'张三',
            sex:'男',
        }
    },
    // methods:{
    //   showName () {
    //     alert(this.name)
    //   }
    // }
    mixins: [mixin, mixin2]


}
</script>

<style>

</style>