vue混入mixin使用特点

export const  pageMixin={
    data() {
        return {
            page: { // 分页信息
                pageNo: 10, // 当前页
                limit: 10, // 每页行数
                total: 0, // 列表总数量
            },        
            tableList: [], // 列表数据
            loading: false, // 加载列表数据的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 90], // 每页行数列表,用于切换每页行数
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
        }
    },
    methods: {
        // 查询列表数据
        queryList() {},
        // 修改当前页
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每页行数
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";   //导入混入（mixin）
export default {
  name: 'Home',
  mixins: [myMixins]     //使用混入（mixin）
}
</script>

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: 'Home',
  mixins: [myMixins],
  mounted(){         
    this.hello()     //在该组件中并没用定义hello方法，使用的是混入中的hello
  }
}
</script>

<template>
  <div class="about">
    <span>This is an About page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: "About",
  mixins: [myMixins]
};
</script>

<script>
import myMixins from "../mixins";
export default {
  mixins: [myMixins]
};
</script>

import mixin from './mixins';
Vue.mixin(mixin)