Vue组件：混入

1、基本用法

混入是一种为组件提供可复用功能的非常灵活的方式。混入对象可以包含任意的组件选项。当组件使用混入对象时，混入对象中的所有选项将被混入该组件本身的选项中。

语法格式如下：

javascript"><script>
//第一步：引用 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';export default {//第二步：使用 mixin 对象mixins: [userMixin]
}
</script>

2、选项合并

（1）当组件和混入对象包含同名选项时，这些选项将以适当的方式合并。例如，数据对象在内部会进行递归合并，在和组件的数据发生冲突时组件数据优先。

（2）值为对象的选项，如：methods、computed 和 components 等，在合并时将被合并为同一个对象。如果两个对象的键名冲突，则取组件对象的键值对。

（3）同名钩子函数将混合为一个数组，因此都会被调用。另外，混入对象的钩子会先进行调用，组件自身的钩子会后进行调用。

3、综合实例

【实例】创建两个组件，这两个组件有相同的数据、方法、生命周期钩子，使用组件的混入方式实现功能。执行结果如下图：

（1）在项目中创建 mixins 目录，并创建 UserMixin.js 脚本文件

javascript">// 定义一个 mixin 对象，复用的公共代码
export const userMixin = {//数据data() {return {userModel: {userName: '',blogName: '',blogUrl: ''}}},//方法methods: {loadData: function () {this.userModel.userName = 'pan_junbiao的博客';this.userModel.blogName = '您好，欢迎访问 pan_junbiao的博客';this.userModel.blogUrl = 'https://blog.csdn.net/pan_junbiao';}},//生命周期钩子beforeCreate: function () {console.log("beforCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");},mounted: function () {console.log("mounted");},beforeUpdate: function () {console.log("beforeUpdate");},updated: function () {console.log("updated");}
}

（2）创建 ComponentA.vue 组件，并引入和使用混入

<template><fieldset><legend>组件A</legend><p>用户名称：{{ userModel.userName }}</p><p>博客信息：{{ userModel.blogName }}</p><p>博客地址：{{ userModel.blogUrl }}</p><button @click="loadData">加载数据</button></fieldset>
</template><script>
//第一步：引入 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';export default {//第二步：使用 mixin 对象mixins: [userMixin]
}
</script><style scoped>
fieldset {font-size: 18px;color: red;margin-bottom: 20px;
}
</style>

（3）创建 ComponentB.vue 组件，并引入和使用混入

<template><fieldset><legend>组件B</legend><p>用户名称：{{ userModel.userName }}</p><p>博客信息：{{ userModel.blogName }}</p><p>博客地址：{{ userModel.blogUrl }}</p><button @click="loadData">加载数据</button></fieldset>
</template><script>
//第一步：引入 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';export default {//第二步：使用 mixin 对象mixins: [userMixin]
}
</script><style scoped>
fieldset {font-size: 18px;color: blue;margin-bottom: 20px;
}
</style>

（4）在 App.vue 根组件中引入两个组件

<template><!-- 第三步：使用组件 --><ComponentA></ComponentA><ComponentB></ComponentB>
</template><script>
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';export default {//第二步：注册组件components: {ComponentA,ComponentB}
}
</script>