一:混入 mixin (抽离公共逻辑)
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。把各种公共用的方法等封装在混入文件中,在不同的组件中有相同的操作方法时可以单独提取出来,放到单独的文件中,在使用的组件中注入即可。以此实现vue组件中的可复用功能。
特点:可以定义共用的变量,(写在data函数中)在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响
定义混入js:
// 里面的定义方式与组件export default 中写法相同
let mixin = {
data (){
return {
activityId: null,
userObj: {
1: '非会员老客',
2: '非会员新客',
3: '会员老客',
4: '会员新客'
}
}
},
mounted () {
this.activityId = this.$route.query.activityId
console.log('mixin', this.activityId)
},
methods: {
getDateString (timeTemp) {
var now = new Date(timeTemp)
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
},
getUserType(type) {
return this.userObj[type]
}
}
}
export default mixin
在Home组件中引入mixin:
<template>
<div class="hello">
{{ getUserType(1) }}
{{ getDateString(1595140245985) }}
</div>
</template>
<script>
// 引入文件
import mixinPage from '../mixin/index'
export default {
mixins: [mixinPage] // 定义
}
</script>
<style scoped>
</style>
上面是在单个组件中引入
下面是全局引入
在main.js 中加入
import mixPage from './mixPage.js'
Vue.mixin(mixPage)
组件里直接调用:
<template>
<div class="hello">
{{ getUserType(1) }}
{{ getDateString(1595140245985) }}
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
OVER~
问题:
1. 方法、变量如果在组件内找不到定义,如果组件引入mixin,要去mixin中找
2. 组件引入mixin中的data,可能出现mixin data中变量名与组件data中变量名冲突情况