代码地址：

https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/67

需要先在main.js中引入

//引入Vue
import Vue from 'vue'
//引入组件
import App from './App70.vue'
//引入插件
import plugins from './plugins'
//关闭生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(plugins)
//创建vm
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <div>
      vue mixin混入：<br/>
      场景：如果多个组件中用到同样功能的方法，如：showId(id)<br/>
      可以把这些同样功能的方法抽离出来放到一个js中,如:mixin.js<br/>
      然后
      <hr/>
    </div>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/67/School.vue";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>

<style>
.app {
  background-color: #999;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p>id：{{ school.id }}</p>
    <p>名称：{{ school.name }}</p>
    <p>地址：{{ school.address }}</p>
    <button @click="showId(school.id)">弹出id</button>
    <hr/>
    <Student></Student>
  </div>
</template>

<script>
import Student from './Student.vue'
import {mixin} from "@/mixin";

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {
    Student
  },
  data() {
    return {
      school: {
        'id': '001',
        'name': '清华',
        'address': '北京'
      }
    }
  },
  methods: {
    //提到mixin.js中去了
    // showId(value) {
    //   alert(value)
    // }
  },
  //混入：如果多个组件中有相同功能的方法，可以移到mixin中实现共用
  mixins: [mixin],
}
</script>

<style>

</style>

Student.vue

<!--组件的结构-->
<template>
  <div>
    <dl>
      <dt>{{ className }}学生信息</dt>
      <dd v-for="(s) in students" :key="s.id">
        {{ s.id }}-{{ s.name }}-{{ s.sex }}-{{ s.age }}
        <button @click="showId(s.id)">弹出id</button>
      </dd>
    </dl>
  </div>
</template>

<!--组件的交互代码:数据\方法-->
<script>
import {mixin} from "@/mixin";

export default {
  //组件名称，这个名称仅是给vue插件中显示用的
  name: 'my-student',
  //组件数据：由于数据是从props接收的，这里不能定义数据
  data() {
    return {
      className: '一年级',
      students: [//数组中的对象操作
        {id: 1, name: '李四', sex: '男', age: 39},
        {id: 2, name: '王五', sex: '女', age: 42},
      ]
    }
  },
  //组件方法
  methods: {
    //提到mixin.js中去了
    // showId(value) {
    //   alert(value)
    // }
  },
  //混入：如果多个组件中有相同功能的方法，可以移到mixin中实现共用
  mixins: [mixin]
}

</script>

<!--样式-->
<style>
dt {
  color: red;
}
</style>

mixin.js

/**
 * mixin:多个组件中相同功能的方法可以提取到这里实现共用
 * 注意：如果在plugins.js中定义了混入，将会覆盖mixin.js
 */
export const mixin = {
    data() {
        return {
            'mixin-test': '我来自mixin.js中的data()'
        }
    },
    methods: {
        showId(id) {
            alert('我来自mixin.js中,id:'+id)
        }
    }
}