【VUE】自定义全局组件

首先在自己的项目路径的组件目录components下创建pagination文件夹，我已分页组件为例，pagination文件夹下有两个文件index.js、pagination.vue。

index.js

import pagination from './pagination.vue'

const Pagination = {
    install(Vue) {
        Vue.component('Pagination',pagination)
    }
}

// 导出组件
export default Pagination

pagination.vue

// 只复制了部分代码
<template>
    <ul class="pagination">
        <li class="total">
            共 {{ total }} 条
        </li>
        <li :class="{'disabled': current == 1}">
            <a class="btn-l" @click="switchPage(1)">首页</a>
        </li>
        <li :class="{'disabled': current == 1}">
            <a class="btn-l" @click="switchPage(current - 1)">上一页</a>
        </li>
        <li v-for="v in pagelist" :class="{'current': current == v.val}">
            <a @click="switchPage(v.val)"> {{ v.text }} </a>
        </li>
        <li :class="{'disabled': current == page}">
            <a class="btn-l" @click="switchPage(current + 1)">下一页</a>
        </li>
        <li :class="{'disabled': current == page}">
            <a class="btn-l" @click="switchPage(page)">尾页</a>
        </li>
    </ul>
</template>

在main.js中引入

import Vue from 'vue';
import App from '@/App';

/* ==================
  Pagination组件引入
 ==================== */
import Pagination from '@/components/pagination/index';
Vue.use(Pagination);

new Vue({
    el: '#app',
    render: h => h(App)
})

在main.js中引入后，就可以在其他页面中使用，比如在App.Vue页面使用

<template>
  <Pagination :total="total" :current='current' :item="item" @pagechange="pagechange"></Pagination>
</template>