mixin的介绍

官方介绍：混入（mixin）提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项，将被混合进入该组件本身的选项。

案例

组件

组件 1

<template>
  <div>
    <h2 @click="showName">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>
<script>
  export default {
    name:'Student',
    data(){
     return {
      name:'张三'，
      sex:'男'
     }
   }，
 methods:{
   showName(){
    alert(this.name)
   }
 },
}
</script>

引入mixin的组件2

<template>
  <div>
    <h2 @click="showName">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>
<script>
import {hunhe} from '../mixin'
  export default {
    name:'Student',
    data(){
     return {
      name:'张三'，
      sex:'男'
     }
   }，
   mixin:[hunhe]
 
}
</script>

组件1和组件2，引入混入

由上图我们可以看出，组件1和组件2 ，有相同的部分，把他俩相同的部分删除，单独写在别的文件里面，在组件1和组件2分别引入。这种方式，就叫做混入。

• 也就是两个组件，共享一个配置，并且这个配置是一样的；
• 新建一个'mixin.js'文件，这个名字可以随便取；
  • 从这里引出"hunhe"

export const hunhe = {
  methods:{
  showName(){
   alert(this.name)
    } 
  },
}

• 在组件1和组件2里把methods删除，引入'hunhe', import {hunhe} from '../mixin'
• 怎么去应用这个混合，在组件1和组件2里直接引入mixin; mixin:[hunhe]

整体页面

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