Mixin - vue
mixins
mixin: 有两个非常相似的组件，他们的基本功能是一样的，可以局注册一个混合，影响注册之后
所有创建的每个 Vue 实例，这就是mixin。
Mixin对编写函数式风格的代码很有用，一般情况下不会改变函数作用域外部的任何东西，输入相同，得到的结果也一定相同。
基础用法
新建一个mixin.js 文件，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| minix.js
export const myminix= {
data(){
return {
}
},
mounted(){
this.sayhello();
},
created(){
},
methods:{
sayhello:function(){
console.log("hello from myMinix!");
}
}
}
|
一个简单的方法，在组件被挂载后 输出 “hello”,
然后在想要使用这个公共方法的组件中引入进去。
1
2
3
4
5
6
7
| other.vue
script:
export default {
mixins:[myminix],
}
|
这样引入后的效果，就是在other的组件中，同样加入了sayhello() 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| other.vue
script:
export default {
mounted(){
this.sayhello();
},
methods:{
sayhello:function(){
console.log("hello from myMinix!");
}
}
//output 'hello from myMinix'
|
在other 组件被挂载后，输出hello from myMinix,
冲突
到这里，会有一个问题，如果other.vue 本身也有同样是操作挂载在mounted 上，到底谁会先执行，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| other.vue
script:
export default {
mixins:[myminix],
mounted(){
this.sayhello();
},
methods:{
sayhello:function(){
console.log("hello from other instance!");
}
}
//output 'hello from myMinix'
//output 'hello from myMinix'
|
输出了两次一样的结果，都来自other 组件， 第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayhello()函数。
全局下注册minix
比如在 vue-cli 构建的项目中，main.js 中定义了一个minix,并且挂载在vue 实例上，
1
2
3
4
5
6
7
8
9
10
| Vue.mixin({
mounted() {
console.log("hello from other");
}
})
new Vue({
})
|
那么在 Vue 实例下的每个组件都会 在挂载的时候执行一次这个方法，输出多次 “hello from other”
lq博客