Mixin
1. 基本使用
创建mixin文件
// mixin.js
export const HelloMixin = {
data () {
return {
num: 0
}
},
methods: {
hello () {
console.log('hello from mixin')
},
addNum () {
this.num++
}
}
}
引入
- 全局引入
import { HelloMixin } from './mixin'
Vue.mixin(HelloMixin)
- 局部引入
import { HelloMixin } from './mixin'
export default {
name: 'Mixin',
mixins: [HelloMixin]
}
使用
以局部引入为例
// Temp1.vue
<template>
<div>
<h3>Temp1</h3>
mixin中的num: {{ num }}
<!-- addNum为HelloMixin中的方法 -->
<button @click="addNum">Add</button>
</div>
</template>
<script>
import { HelloMixin } from './mixin'
export default {
name: 'Temp1',
mixins: [HelloMixin],
created () {
// hello为HelloMixin中的方法
this.hello() // hello from mixin
}
}
</script>
<style lang="stylus" scoped></style>
2. mixin特性
方法和参数在各组件中不共享
前面已经创建了Temp1组件, 再写一个Temp2做对比
// Temp2
<template>
<div>
<h3>Temp2</h3>
mixin中的num: {{ num }}
<button @click="addNum">Add</button>
</div>
</template>
<script>
import { HelloMixin } from './mixin'
export default {
name: 'Temp2',
mixins: [HelloMixin],
created () {
this.hello()
}
}
</script>
<style lang="stylus" scoped></style>
结果: Temp1中的num增加时,不影响Temp2中的num值
选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
- 数据合并
数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
-
在mixin.js中定义data
// mixin.js data () { return { num: 0, message: 'message from mixin' } },
-
在组件中定义data
// Index.vue data () { return { message: 'message from Index.vue ', compName: 'Index' } },
-
结果
mixin.js
和Index.vue
中都有message
,最终组件中的message
覆盖了mixin
中的message
// Index.vue created () { console.log(this.$data) // { compName: "Index", message: "message from Index.vue ", num: 0 } },
- 钩子函数
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用
-
mixin.js
created () { console.log('mixin') },
-
Index.vue
created () { console.log('Index') },
-
结果
先输出
Index
再输出mixin
- 对象
值为对象的选项,例如
methods
、components
和directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
-
mixin.js
methods: { conflicting () { console.log('conflicting from mixin') } }
-
Index.vue
methods: { conflicting () { console.log('conflicting from Index') } }
-
结果
<button @click="conflicting">对象冲突</button>
在Index.vue中调用conflicting函数时, 控制台只打印了
conflicting from Index
3. 区别
mixins 与 vuex
-
Vuex: 不同组件操作同一个变量
-
mixins: 定义公用的变量,不同组件引入后, 各个变量相互独立
mixins 与 公共组件
- 公共组件: 父组件+子组件
- mixins: 相当于扩展了"父组件"