Vue:mixin
mixin
mixin是vue提供的一个功能,意为混入。他用起来像共享一个js,实际的效果又不太像,下面具体来说下
局部mixin
- 定义一个共用的js文件,定义的json对象里的属性需要是组件实例可以编写的属性,比如created,mounted,data(),methods等等:
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊!')
},
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
- 引入此js文件,如下:
<template>
<div>
<h2 @click="showName">学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
<script>
import {hunhe,hunhe2} from '../mixin'
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男'
}
},
mixins:[hunhe,hunhe2]
}
</script>
到这其实就搞定了,但上面只是理想情况。万一混入的内容和本身的内容冲突了呢,那要以谁的为准,还是追加的关系?
给结论:如果是data中的属性冲突了,已当前组件实例的为准。其他情况都是追加,且混合的是追加在前面。
全局混合
全局混合是所有的组件都是进行混合;在main.js中加入如下代码:
import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
然后其他组件都不需要做任何修改,自动混入相关代码。
总结:mixin平时使用的不多;有用的话还是局部混入居多。