【Vue】Vue组件中事件和方法的混合（mixin）应用(图文+代码示例)

用途：把.vue文件中的重复事件（如：methos），统一集中放在一个mixin.js中管理，方便做一些通用事件或函数的类。

一、局部混入

  1、School.vue

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【School.vue】---------</h2>
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校</button>
  </div>
</template>

<script>
import {mixin_School} from '../mixin'
// 把组件暴露出去，方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:"School",
  data() {
    return {
      schoolName: "清华大学",
      address: "北京",
    };
  },
  mixins:[mixin_School]
};
</script>

<style>
.demo {
  background-color: antiquewhite;
  border: 1px red solid;
}
</style>

2、Student.vue

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【Student.vue】---------</h2>
    <h2>入取该校第1名学生：{{ m_Name1 }}</h2>
    <h2>入取该校第2名学生：{{ m_Name2 }}</h2>
    <h2>入取该校第3名学生：{{ m_Name3 }}</h2>
    <button @click="showName">点我修改学生姓名</button>
  </div>
</template>

<script>

import {mixin_Student} from '../mixin'


// 把组件暴露出去，方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      m_Name1: this.name1,
      m_Name2: this.name2,
      m_Name3: this.name3,
    };
  },
  props: {
    name1: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name2: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name3: {
      type: String, // name1的类型是字符串
      required: false, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
  },
  mixins:[mixin_Student]
};
</script>

 
<style>
.demo {
  background-color: rgb(231, 231, 231);
  border: 1px rgb(172, 172, 172) solid;
  height: 280px;
  width: 400px;
  padding-left: 10px;
}
.demo button {
  height: 40px;
  width: 200px;
  font-size: 18px;
}
</style>

3、App.vue

<template>
  <div>
    
    <Student name1="貂蝉" name2="吕布" name3="关羽" ></Student>
  
    <School></School>

  </div>
</template>

<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'

// 注册组件
export default {
  name: "App",
  components: {
    School,
    Student
  },
};
</script>

4、mixin.js

// School组件中的方法事件
export const mixin_School = {
    methods: {
        showName() {
            alert(this.schoolName + "OKOKOK");
        },
    },
}

// Student组件中的方法事件
export const mixin_Student = {
    methods: {
        showName() {
            this.m_Name1 = "唐僧";
            this.m_Name2 = "观音";
            this.m_Name3 = "如来";

            // alert(this.name1);
        }
    }
}

二、全局混入

用途：一般用于全局的通用方法和事件，所有vue组件都继承和执行该方法。

【注意】：methods中的方法名不能重名

1、main.js(主要在这里全局注册和引入)

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'

import {mixin_School,mixin_Student} from './mixin'
Vue.mixin(mixin_Student)
Vue.mixin(mixin_School)

// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
new Vue({
  el:"#app",
  // 完成了这个功能：将APP组件放入窗口中
  render: h => h(App),
})

2、School.vue（去掉了methods方法）

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【School.vue】---------</h2>
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName1">点我提示学校</button>
  </div>
</template>

<script>
// 把组件暴露出去，方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "School",
  data() {
    return {
      schoolName: "清华大学",
      address: "北京",
    };
  },
};
</script>

<style>
.demo {
  background-color: antiquewhite;
  border: 1px red solid;
}
</style>

3、Student.vue（去掉了methods方法）

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【Student.vue】---------</h2>
    <h2>入取该校第1名学生：{{ m_Name1 }}</h2>
    <h2>入取该校第2名学生：{{ m_Name2 }}</h2>
    <h2>入取该校第3名学生：{{ m_Name3 }}</h2>
    <button @click="showName">点我修改学生姓名</button>
  </div>
</template>

<script>

// 把组件暴露出去，方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      m_Name1: this.name1,
      m_Name2: this.name2,
      m_Name3: this.name3,
    };
  },
  props: {
    name1: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name2: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name3: {
      type: String, // name1的类型是字符串
      required: false, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
  },
};
</script>

 
<style>
.demo {
  background-color: rgb(231, 231, 231);
  border: 1px rgb(172, 172, 172) solid;
  height: 280px;
  width: 400px;
  padding-left: 10px;
}
.demo button {
  height: 40px;
  width: 200px;
  font-size: 18px;
}
</style>

4、mixin.js

// School组件中的方法事件
export const mixin_School = {
    methods: {
        showName1() {
            console.log("======================")
            alert(this.schoolName + "OKOKOK");
        },
    },
}

// Student组件中的方法事件
export const mixin_Student = {
    methods: {
        showName() {
            this.m_Name1 = "唐僧";
            this.m_Name2 = "观音";
            this.m_Name3 = "如来";
        }
    }
}