mixins的使用

不知道你们有没有这样的一个感觉，尤其是在写后台管理系统的时候（因为后台管理大部分都是表格，所以几乎每一个路由都有表格，那这样的话我们每次写一个页面的增删改查的时候都需要重复的取获取表格的数据，以及分页的total等等。。），你会发现这个tableData我不是刚刚在那个页面写过吗？tableData和分页的total我不是已经在上一个页面上的data上写过，到头来就是ctrl+c，ctrl+v。大家都是聪明人，肯定不会写重复的代码。

而mixins混入就可以解决这个问题。

mixins特性：

1. 和vue一样，有自己的生命周期，即： beforeCreate,created,beforeMount,mounted
2. mixins的生命周期优先于vue生命周期执行

// tab_b.vue组件
<template>
  <div class="box">
  </div>
<template>
 
<script>
import tabeMixns from '@/mixins/table_mixins'
export default {
  mixins: [tabeMixns],
  data(){
    return {
    }
  },
  beforeCreate(){
    console.log('触发组件beforeCreate')
  },
  created(){
    console.log('触发组件created')
  },
  beforeMount(){
    console.log('触发组件beforeMount')
  },
  mounted(){
    console.log('触发组件mounted')
  },
  watch: {
  },
  methods: {
  }
}
</script>

export default {
    data() {
        return {
            currentPage: 1,
            pageSizes: [100, 200, 300, 400],
            pageSize: 100,
            total: 500,
            money: 304.87643535
        }
    },
    beforeCreate(){
        console.log('触发mixins的beforeCreate')
      },
    created(){
        console.log('触发mixins的created')
    },
    beforeMount(){
    console.log('触发mixins的beforeMount')
  },
    mounted(){
        console.log('触发mixins的mounted')
    },
    methods(){}
 }

执行的顺序依次是：

可以看出，先执行mixins的生命周期，再执行vue的生周期