mixin 混合

功能

可以把多个组件共用的配置提取成一个混入对象，他是一个单独 js 文件。

使用方法

1. 第一步：定义混合

   export const mixin = {
     data(){},
     methods: {}
   }

2. 第二步：使用混入

   1. 全局混入：在 main.js new Vue 实例之前，使用 Vue.mixin(xxx) 混入，这样对所有组件都生效。
   2. 局部混入：在组件配置项中新增一个 mixins 配置，值为数组类型。

案例

需求

1. 创建 Student 组件，显示学生姓名和年龄。
2. 创建 School 组件，显示学校名称和地址。
3. 点击学生姓名，弹窗弹出姓名。
4. 点击学校名称，弹窗弹出名称。

代码实现

1. Student.vue

   <template>
       <div>
           <h3 @click="showName">学生姓名：{{ name }}</h3>
           <h3>学生年龄：{{ age }}</h3>
       </div>
   </template>
   
   <script>
       import { mixin } from "../mixin";
   
       export default {
           name: 'Student',
           data(){
               return {
                   name: 'iGma',
                   age: 21
               }
           },
           mixins: [mixin]
       }
   </script>

2. School.vue

   <template>
       <div>
           <h3 @click="showName">学校名称：{{ name }}</h3>
           <h3>学校地址：{{ address }}</h3>
       </div>
   </template>
   
   <script>
       import { mixin } from "../mixin";
   
       export default {
           name: 'School',
           data(){
               return {
                   name: '内蒙古农业大学',
                   address: '内蒙古呼和浩特'
               }
           },
           mixins: [mixin]
       }
   </script>

3. mixin.js

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