文章目录
- 一、mixins是什么
- 二、mixins使用方式
- 1.局部混入
- 2.全局混入
- 三、mixins注意事项
一、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混入再各自组件实例)
事实上:使用混入的过程中出现冲突,除生命周期钩子外,其余的都以本组件中的为主,混入的不生效;生命周期钩子产生冲突是先执行混入的声明周期钩子,再执行本组件的生命周期钩子。