官网地址:全局混入Vue.mixin()
使用场景:货币单位,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。
步骤:
-
建立mixin.js文件
1.1按需引入的情况下export default { data() { return { startBrowsingTime:'', //开始浏览时间 eventId:'eventId' } }, mounted(){ this.startBrowsingTime=this.$moment(Date.parse(new Date())).format("YYYY-MM-DD HH:mm:ss") console.log(date) }, methods:{ $_statistics(a){ if(a=='点击'){ // 使用 点击的参数 }else{ // 使用 离开页面时候的参数 } console.log(this.eventId) //参数 let postData={ vipkc_bm_gm_zfqr_llkssj:this.startBrowsingTime } this.axios({ methods:'post', data:postData }) } }
}
1.2 全局引入的情况下
1.2.1 全局引入时的第一种写法,单独建立mixins.js文件。import Vue from "vue"; let mixins = Vue.mixin ({ data() { return { categoryName_mixins: '' } }, methods: { $_getCategoryName(categoryCode) { return this.categoryName_mixins; } } }) export default({ mixins })
1.2.2 全局引入的第二种写法,在main.js里写全局混入,无需再次引入
Vue.mixin ({ data() { return { categoryName_mixins: '' } }, methods: { $_getCategoryName(categoryCode) { return this.categoryName_mixins; } } })
-
引入
2.1全局引入(单独建立mixins的情况下)import mixin from './mixin' Vue.mixin(mixin)
2.2按需引入
import mixin from './mixin' export default { mixins:[statistics], }
3.使用
eg:list.vue
created(){
console.log(this.eventId)
//eventId
this.$_statistics()
//eventId
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。