# mixin 与 mixins
# mixin
mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。
<script>
Vue.mixin({
beforeCreate(){
console.log('init success')
}
})
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7
# mixins
多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码
<script>
let myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
},
data(){
return{
msg:"hello world!"
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin],
template:"<h1>{{msg}}</h1>"
})
new Component().$mount("#app")
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25