小程序在哪里_海外短视频怎么下载_百度排名怎么做_手机地图app下载安装

---

一、mixins是什么

mixins 是一个包含任意组件选项（如 data、methods、created、mounted 等）的 JavaScript 对象。当组件引入 Mixin 时，其选项会与组件本身的选项合并，从而实现代码复用。例如，可封装公共弹框控制逻辑，避免重复编写相似代码。

---

二、mixins使用方式

功能：可以把多个组件共用的配置提取成一个混入对象。

使用方式：
第一步定义混合：

```
{data(){....},methods:{....}....
}
```

第二步：使用混合
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

1.局部混入

在src目录中定义一个mixin.js文件

//mixin.js
const mixin = {methods: {showName(){alert(this.name)}},mounted() {console.log("我是混合输出...");},
}const mixin2 = {data(){return{x:100,y:200}}
}export  {mixin,mixin2}

在组件School.vue中引入mixin并进行使用mixins:[mixin1,mixin2]
注意局部使用：mixins:[]形式

<template><div class="demo"><h2 @click="showName">学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2>	</div>
</template><script>import {mixin1,mixin2} from '@/mixin';export default {name:'School',data(){return {name:'vue学院',address:'上海黄浦区',x:888}},mixins:[mixin1,mixin2],methods:{showName(){console.log("我是School组件的showName方法");}}}
</script><style>.demo{background-color: orange;}
</style>

同理Student.vue中也引入mixin

<template><div><h2 @click="showName">学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2></div>
</template><script>import {mixin1,mixin2} from '@/mixin';export default {name:'Student',data(){return {name:"张三",sex:"男"}},mixins:[mixin1,mixin2]}
</script>

App.vue

<template><div><School></School><hr><Student></Student></div>
</template><script>import Student from './components/Student.vue';import School from './components/School.vue';export default {name:'App',components:{Student,School},data() {return {}},}
</script>

此时你会发现School组件里面会有mixin中的data数据

console.log(“我是混合输出…”);这句语句输出了两次，表名School组件和Stuent组件都具有mounted钩子函数

2.全局混入

全局混入表示混入到Vue对象中，Vue下的所有组件都会使用混入的方法，一定要注意，是所有的组件，所以，在使用全局混入的时候要确保所有的组件都会使用到。

//main.js文件
//引入mixin
import {mixin1, mixin2} from "./mixin.js"
//全局使用混合
Vue.mixin(mixin1)
Vue.mixin(mixin2)

注意：和局部混入mixins:[]形式进行区分，在全局混入轴组件就不需要引用混入

为什么这里mounted里面的语句输出了4次呢？是因为全局混入mixin会自动给实例、App.vue、School.vue和Student.vue自动挂载。
注意：全局混入常用于插件的编写，使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

三、mixins注意事项

注意1：当组件data数据和mixin混入的data发生冲突，以组件的data数据为主

注意2：当组件的methods方法里面方法与mixin的methods方法同名冲突，以组件的方法为主

注意3：当我在Schhol组件中加入mounted输出语句console.log(“我是School组件的输出”)时，和mixin的生命周期函数mounted冲突时，先执行混入的mounted再执行各自组件的mounted。（上图是因为vm实例挂载所以先输出然后再mixin混入再各自组件实例）

事实上：使用混入的过程中出现冲突，除生命周期钩子外，其余的都以本组件中的为主，混入的不生效；生命周期钩子产生冲突是先执行混入的声明周期钩子，再执行本组件的生命周期钩子。

---