可以在多个组件间横向复用代码，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
混入和组件data中数据,方法、计算属性等合并，重名的就用组件的覆盖混入对象的，生命周期的钩子，都会执行，不会覆盖。
组件可以时访问混入数据，选项，反之
示例：
<div id="app">
<!-- 使用组件 -->
<my-component></my-component>
</div>
<!-- 组件模板 子组件-->
<template id="mycomponent">
<div>
{{ msg }}
<button @click="getInfo">点击执行混入方法</button>
</div>
</template>
<script>
// 定义混入对象
let mixin = {
data(){
return {
msg:"混入"
}
},
methods:{
getInfo(){
console.log("混入方法")
}
}
}
// 子组件选项对象
let MyComponent = {
mixins:[mixin],//将混入对象里的内容添加到当前组件中去，混入对象可以引用几乎任何Vue组件所能引用的东西
template: `#mycomponent`,
data(){
return{
counter:0
}
},
methods：{}
};
// 实例中注册组件
const vm = new Vue({
el:"#app",
data:{},
components: {
MyComponent
}
})
</script>
显示结果：
image.png
Vue已经自动将混入对象里的内容添加到组件中去了, 或者可以说是混入到组件内了，
混入对象可以引用几乎任何Vue组件所能引用的东西, 就好像他是组件本身的一部分
- 混入对象与组件的选项合并
如果混入对象和组件间有重复的选项,如果重名的方法或者都有同一个生命周期的钩子函数,根据他们的类型,Vue会区别对待
2.1 数据对象合并
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
示例代码如下:
<script>
// 定义混入对象
let mixin = {
data() {
return {
message: 'hello',
foo: 'abc'
}
}
}
// 组件选项对象
let MyComponent = {
mixins: [mixin],
template:"<div></div>",
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
created(){
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
};
// 实例中注册组件
const vm = new Vue({
el: "#app",
data: {},
components: {
MyComponent
}
})
</script>
image.png
注意，如果一个页面，里面多个组件 注册同一个混入，比如index.vue 页面，引入aa.vue组件，bb.vue组件，主组件，子组件三者都注册了同一个混入，
那么 有几种情况
情况1
在(混入文件)mixin.js，添加一个变量
data(){
return {
aa :1
}
}
那么分别index.vue 页面，aa.vue组件，bb.vue组件，alert(this.aa),都会 弹出 1
此时在index.vue组件，修改aa
// index.vue
created(){
this.aa ++
}
在mixin.js
created() {
setTimeout(()=>{
this.$alert(this.indexaa)
},2000)
},
那么就会分别弹出 2 1 1，弹出三次，可见在同一个页面多个组件同时注册同一个引入，数据并未同步，而是做了作用域隔离
情况2
index.vue 页面，引入aa.vue组件，bb.vue组件，主组件，子组件三者都注册了同一个混入
在index.vue组件定义了 aa
data(){
return {
aa :1
}
}
在mixin.js,index.vue 弹出1，aa.vue组件 弹出空，bb.vue组件弹出空，弹出3次，
created() {
this.$alert(this.indexaa)
},
可见在同一个页面多个组件同时注册同一个引入，混入文件就会被调用多次，比如里面的方法，变量，但是他们又是独立隔离的
