vue中mixins的使用方法和注意点---mixins第一篇 1.mixins基础概况 2.mixins的使用方法 3.mixins的特点 4.mixins与vuex的区别 5.mixins与公共组件的区别
混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
2.mixins的使用方法
2.1.先定义一个mixins，代码如下
export const myMixin = {
data(){
return {
num: 1
}
},
created(){
this.hello()
},
methods:{
hello(){
console.log("hello from mixin")
}
}
}
2.2.把定义的mixins引入到组件中，代码如下
<template>
<div class="template1">
组件1
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default { mixins:[myMixin] } </script>
3.mixins的特点
3.1.引入的mixins中的方法和参数在每一个使用组件中不共享
3.1.1.mixins对象中的参数
export const myMixin = { data(){ return { num: 1 } }, created(){ this.hello() }, methods:{ hello(){ console.log("hello from mixin") } } }
3.1.2.组件1引用mixins对象参数（把num参数加了1）
<template>
<div class="app-container">
<div class="template1">
template1里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
this.num++
}
}
</script>
<style scoped>
.template1{
font-size:28px;
color:red;
}
</style>
3.1.3组件2引用mixins对象参数（没有做任何处理）
<template>
<div class="app-container">
<div class="template2">
template2里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
}
</script>
<style scoped>
.template2{
font-size:28px;
color:blue;
}
</style>
3.1.4.总结
组件1：组件1里面处理了num参数，num参数变成处理后的值
组件2：组件2没有处理num参数，组件2里面的num参数还是mixins里面的值，没有发生任何改变
3.2.引入的mixins中的为对象，如methods、components等
3.2.1.mixins中的对象会与组件里面的对象合并。对象里面的键名出现冲突的情况，组件的对象键会覆盖掉mixins中的对象键。
3.2.2.mixins代码，如下：
export const myMixin = { data(){ return { num: 1 } }, methods:{ func_one(){ console.log("func_one from mixin"); }, func_two(){ console.log("func_two from mixin"); } } }
3.2.3.组件的代码，如下：
<template>
<div class="app-container">
<div class="main">
这是main
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
this.func_main();
this.func_one();
this.func_two();
},
methods:{
func_main(){
console.log('func_main from mian');
},
func_two(){
console.log('func_two from mian');
},
}
}
</script>
<style scoped>
.main{
font-size:28px;
color:blue;
}
</style>
3.2.4.打印台输出
3.3.引入的mixins中的为函数，如created、mounted等
3.3.1.会被合并调用，mixins中的函数在组件里的函数之前调用
3.3.2.mixins代码，如下：
export const myMixin = { data(){ return { num: 1 } }, created(){ console.log("created from mixins"); } }
3.3.3.组件代码，如下：
<template>
<div class="app-container">
<div class="main">
这是main
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
console.log("created from 组件");
}
}
</script>
<style scoped>
.main{
font-size:28px;
color:blue;
}
</style>
3.3.4.打印台输出
4.mixins与vuex的区别
4.1.vuex的特点
用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任何一个组件中修改此变量的值之后，其他组件中的此变量的值也会随之修改。
4.2.mixins的特点
可以定义共用的变量，在每个组件中使用，引入组件之后，各个变量是相互独立的。值的修改在组件中不会相互影响。
5.mixins与公共组件的区别
5.1.组件的特点
在父组件中引入子组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的
5.2.mixins的特点
把mixins引入到组件之后，与组件中的对象和方法进行合并，相当于扩展了组件的对象和方法，可以理解为形成了一个新组件