混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
这句话我们可以理解为在js代码中定义一个混入对象，里面可以包含一个组件可以有的任何组件选项:data、method、watch、钩子函数等，使用的话，分为局部混入和全局混入。
首先新建一个mixin.js文件，添加以下代码。
// 混入 export default { data() { return { msg: "Hello Word!" }; }, created() {}, computed: {}, methods: { show() { console.log(this.msg); } } };
复制
这个文件格式应该比较眼熟，一个.vue文件包含template、script、style三个部分，mixin.js这个文件很像script这个部分。对的，script里的data、method、watch、钩子函数等，都可以定义到mixin.js这个文件。那这里面可能就会存在问题，比如mixin.js中的data、method等和引用混入的组件中存在冲突，这时采用组件内部优先。
局部混入
<template> <div id="myVue"> <span @click="show">{{msg}}</span> </div> </template> <script> import myMixin from "./mixin.js"; export default { name: "myVue", mixins: [myMixin], created() { console.log("组件自身的钩子函数"); }, }; </script>
复制
首先我们引入mixin.js，然后就可以调用混入的方法和数据
全局混入
在main.js中引入该文件并使用mixin方法进行注册
import Vue from 'vue'; import App from './App'; // 增加混入 import myMixin from "@/mixin"; Vue.mixin(myMixin); new Vue({ el: '#app', components: { App }, template: '<App/>' });
复制
全局注册后，在任意组件都可以使用，谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
文章分享自微信公众号：
